Сделайте изображение подходящим для своего контейнера, установив высоту изображения на высоту контейнеров.

Скажем, у меня есть container.a, и он имеет некоторую высоту в пикселях, скажем, у меня есть другой container.b внутри container.a, который составляет 80% от container.a, теперь предположим, что я хочу поместить изображение с некоторой высотой в пикселях в контейнер. .b, как я могу сделать изображение высотой container.b, а затем сохранить соотношение сторон ширины с помощью CSS?

<div class="container.a">
  <div class="container.b">
    <img class="image.a" src="my_image.png" />
  </div>
</div>

.container.a { width: 200px; height: 300px; }
.container.b { width: 80%; height: 80%; }
.image.a { ? }

person Masu    schedule 16.04.2013    source источник


Ответы (2)


Дайте 100% ширину изображения

 .image.a{width:100%;}
person Akhil Thesiya    schedule 16.04.2013

Использовать это:

.image.a { height:100%; width:auto }
person otinanai    schedule 16.04.2013