3

Нужно, чтобы элемент img, сохраняя пропорции и находясь по центру, принимал минимально необходимый размер для заполнения родительского блока. для примера

При попытке установить min-height и min-width по 100% изображение растягивается на всю свою величину, выходя за границы родителя сверх необходимого (да ещё и только от левого верхнего угла). Возможно ли это без скриптов?

Aleksandr Shemetillo
  • 509

3 Answers3

4

Можно воспользоваться object-fit: cover; и object-position: center; например:

div.a {width: 400px; height: 200px;}
div.b {width: 200px; height: 400px;}
div {border: 1px solid black;}
div img {
  object-fit: cover;
  object-position: center;
  height: 100%;
  max-width: 100%;
  min-width: 100%;
}
<div class="a">
  <img src="http://volyninfo.com/core/wp-content/uploads/2016/09/70664-300x206.jpg" />
</div>
<div class="b">
  <img src="http://volyninfo.com/core/wp-content/uploads/2016/09/70664-300x206.jpg" />
</div>
Максим Степанов
  • 2,386
  • Идеально. Спасибо. Не понимаю, почему я этих свойств до сих пор не знал... – Aleksandr Shemetillo Dec 21 '17 at 21:26
  • 1
    Честно говоря, я недавно тут и тоже периодически возникает ощущение - как я раньше этого не знал. Давно работаю, а оказывается столько дыр в знаниях... Сам эти свойства узнал не так давно... – Максим Степанов Dec 21 '17 at 22:01
  • только имейте ввиду, что в ие эти св-ва не поддерживаются – kizoso Dec 22 '17 at 07:14
  • То есть для него всё-таки придётся делать решение на JS? – Aleksandr Shemetillo Dec 22 '17 at 13:14
  • Да, точно, как обычно с IE проблемы. Можно библиотеку подключить, как тут советуют: https://html5book.ru/svoystva-object-fit-i-object-position/ – Максим Степанов Dec 22 '17 at 15:27
3

Можно сделать через background-size: cover; как сам фон. То есть в отличае от ответа fanfer картинка задаётся не элементом img а самим фоном.

.el {
  background: url(https://i.stack.imgur.com/N1DGN.png);
  background-size: cover;
  border: 1px solid black;
  background-position: center;
}

.e1 {
  width: 400px;
  height: 220px;
}


.e2 {
  width: 220px;
  height: 400px;
}
<div class="el e1"></div>
<div class="el e2"></div>
Дмитрий Полянин
  • 13,632
  • 1
  • 21
  • 52
  • Спасибо. Рассматривал этот вариант как запасной. В будущем, картинки должны будут перелистываться, а бэкграунд для этого (могу ошибаться) не очень правильно использовать. – Aleksandr Shemetillo Dec 21 '17 at 21:24
  • @Дмитрий Полянин ещё немного и разменяешь три тысячи. Картинка понравилась, если не возражаешь, заберу себе для будущих примеров:) – Alexandr_TT Jan 02 '18 at 15:42
  • @Alexandr_T спасибо! жду недождусь. я не автор картинки, она из интернета, тек что бери )) – Дмитрий Полянин Jan 02 '18 at 15:43
  • 1
    @Alexandr_T Кстати я всегда когда выбираю картинки для тестов, или делаю сайт но вначале тестовый дизайн, сразу стараюсь сделать что бы было красиво, и картинки тоже сразу выбираю красивые, так приятнее работать. – Дмитрий Полянин Jan 02 '18 at 15:44
  • @Alexandr_T это не вы поспособствовали 3000? – Дмитрий Полянин Jan 02 '18 at 15:47
  • @ДмитрийПолянин это неприличный вопрос :))))))))))) Я просто мимо проходил :) – Alexandr_TT Jan 02 '18 at 15:48
  • @Alexandr_T спасибо доброму путнику! ))) У меня 3000 было целью, можно теперь показывать потенциальному работодателю в резюме )). Но почему-то за 50 или 100 до 3000 скорость уменьшилась в разы, хотя я так же старался, ощущение было что выжимать надо... вот задумываюсь о причинах. – Дмитрий Полянин Jan 02 '18 at 15:51
  • @ДмитрийПолянин А тут не угадаешь никогда причины. Я давно бросил анализировать их. Некоторые ответы я пишу по два дня, обстоятельно, с примерами, даже какие-то формулы вывожу, на мой взгляд очевидная польза должна быть, а результат пшик, даже от автора вопроса, как например здесь https://ru.stackoverflow.com/a/761733/28748 а некоторые на ходу ответы, сделанные за 10 минут засыпают плюсами. Так что, пиши больше ответов, как на рыбалке - будет поклевка, поймаешь, нет - не растраивайся. – Alexandr_TT Jan 02 '18 at 16:07
  • @Alexandr_T спасибо за поддержку! – Дмитрий Полянин Jan 02 '18 at 16:08
1

.img_wrap {
  border: 1px solid #000;
  margin-bottom: 10px;
}

.d1{
  width: 300px;
  height: 100px;
}


.d2{
  width: 200px;
  height: 300px;
}


.img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
<div class="img_wrap d1">
  <img src="http://via.placeholder.com/350x150">
</div>

<div class="img_wrap d2">
  <img src="http://via.placeholder.com/350x150">
</div>
fanfer
  • 1,108