Как сделать, чтобы картинки (разных размеров) занимали полностью блоки с неопределенными параметры (высота и ширина не заданы)?
Картинки помещены в блок <div>
2 ответа
Можно оформить картинку как фон и растянуть...
В сниппете ниже одна картинка вставляется в блоки разных размеров. CSS свойство background-size: cover;
делает так, чтобы фоновая картинка полностью покрывала пространство контейнера (растягивалась или сжималась, соблюдая пропорции картинки). Главный минус в том, что в некоторых случаях не будет видна вся картинка - все зависит от параметров контейнера.
.blockWbg {
background-image: url(http://icdn1.digitaltrends.com/image/google-logo-feature-1030x686.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: inline-block;
}
.b1 {
height: 200px;
width: 100%;
}
.b2 {
height: 100px;
width: 200px;
}
.b3 {
height: 200px;
width: 100px;
}
.b4 {
height: 200px;
width: 200px;
}
<div class="blockWbg b1"> </div>
<div class="blockWbg b2"> </div>
<div class="blockWbg b3"> </div>
<div class="blockWbg b4"> </div>
У свойства background-size:
есть еще вариант background-size: contain;
. Он делает так, что фоновая картинка вставляется в контейнер так, чтобы полностью в нем помещаться. Но он не всегда удобен, потому что в случаях, когда пропорции контейнера не совпадают с пропорциями картинки, будут пустые места.
Если Вы не против потери пропорций картинки, то вот другой вариант.
Здесь без фона. Картинка растягивается на 100% ширину и высоту заданного блока. Пропорции могут потеряться...
.imgW {
border: 1px solid gray;
width: 400px;
height: 300px;
position: relative;
}
.imgW>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="imgW">
<img src="http://www.survey-reviews.net/wp-content/uploads/2012/04/google_logo_small.png">
</div>
Задать для картинки:
html:
<div>
<br><br><br><br><br><br><br><br>
<img src='/'>
</div>
css:
div {
position: relative;
}
img {
border: 1px solid #000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
JSFIDDLE
-
Это не решает основную задачу: надо чтобы "картинки (разных размеров) занимали полностью блоки". В Вашем же варианте лишь абсолютное позиционирование. Добавление
bottom: 0; right: 0
не растягивает картинку... – cyadvert 30 янв '16 в 8:00