Заполнение изменений при увеличении или уменьшении браузера

Question

У меня есть уменьшенное изображение и другое уменьшенное изображение, которое накладывается на миниатюру. Но добавление изменяется для меньшего перекрывающегося изображения по мере увеличения и уменьшения масштаба, и проблема существует только с браузером CHROME. Он отлично работает с IE и firefox. Я попытался использовать процент, чтобы установить значения заполнения для меньшего изображения, но проблема все еще существует. Вот картинки.

Это HTML-

<div class="car-item"> 
         <div class=" car-image"> 
          <img src="/~/media/images/thumb.ashx" alt="Image 1" /> 
         </div> 

          <div class="car video"> 
           <a href="#">VIDEO</a> 
          </div> 

    <div> 

положение для автомобиля видео является абсолютным положение для элемента автомобиля относительно и для автомобиля-изображение статично

Answer 1

У вас будут проблемы при использовании процентов. Это хороший пример того, когда следует использовать absolute positioning.

Я понятия не имею, как выглядит ваш код, поэтому здесь приведен базовый пример того, как выполнить то, что вы нарисовали выше, с абсолютным позиционированием. Я использовал тег span вместо дополнительного тега изображения, но он должен работать все равно.

Возможно, вам придется изменить свой HTML и CSS немного, чтобы заставить его работать в вашей среде.

http://jsfiddle.net/6C8gT/

Вот обновленного jsFiddle (http://jsfiddle.net/6C8gT/1/), который использует разметку и другой с пониженной разметкой (http://jsfiddle.net/6C8gT/2/). Вам действительно не нужны эти DIV, если у вас нет планов для них в будущем.

Я только что сделал то, что я разместил ниже, но изменил CSS, чтобы он соответствовал вашему HTML. Вам нужно будет проверить jsFiddles.

HTML

<div class="container"> 
    <img class="thumb" src="http://lorempixel.com/300/200/" /> 
    <span>Video</span> 
</div> 

CSS

.container { 
    position: relative; 
} 
.container img { 
    display: block; 
} 
.container span { 
    color: white; 
    background-color: black; 
    padding: 5px 10px; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
}