Высота изображения в IE7

Question

Я пытался создать растягиваемое фоновое изображение, просто поместив тег img и присвоив ему ширину и высоту 100% следующим образом:

<div class="item">
    <div class="background">
        <img src="http://placehold.it/100x100" width="100%" height="100%" style="width: 100%; height: 100%; border: 1px solid green;" />
    </div>
    <span class="text">
        aaa bbb ccc ddd
    </span>
</div>

Это прекрасно работает в IE8 +, Chrome и Firefox, но, к сожалению, мне нужно также поддерживать IE 7.

Этот JSFiddle демонстрирует проблему: размер изображения изменяется до 100% ширины, но его соотношение сторон сохраняется, как таковое:

Как заставить изображение быть точно такого же размера, что и содержащий div? Обратите внимание, что если я задаю содержащему div (.background) фиксированный размер, проблема решается, но это противоречит цели изменения размера в соответствии с текстом.

Answer 1

Вам необходимо также установить высоту (и ширину, длину) для содержащего элемента div, а не только для изображения:

.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100%;
    height:100%; /*This is the important bit */
}

http://jsfiddle.net/zPcwC/9/

Также, доказав, что оновсе еще работает, когда текст заполняется:

http://jsfiddle.net/zPcwC/10/

Answer 2

См .: http://jsfiddle.net/cqTTm/

Протестировано в IE7 / 8/9, Firefox, Chrome, Safari, Opera.

Правила *property применяются только к IE7.

.item {
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    *height: 100%
}
.text {
    position: relative;
}

В .background вместо *height: 100% может использоваться обычный height: 100%. Я оставил его для единственного браузера, которому он нужен (IE7), чтобы избежать повторной проверки во всех этих браузерах.

Answer 3

Почему бы вам просто не сделать это?

<div class="item">
  <div class="background">
    aaa bbb ccc ddd
  </div>
</div>

Тогда в вашем CSS вы можете поместить

.background {
  background: transparent url(placeholder.jpg) no-repeat top left;
}

Таким образом, изображение фиксируется как фоновое изображениев .background div.Содержимое внутри фонового элемента div будет растягивать его, открывая только часть фонового изображения.

Это то, что вы спрашиваете?