Растягивание картинки в блоке

164
18 августа 2018, 05:00

подскажите как можно сделать?

есть картинка большая горизонтальная, она вставляется в блок.

Должно получиться так, что картинка растягивается по родительскому блоку на 100%, а вертикально согласно пропорциям + там где картинки не должно быть должна быть белая пустота.

Пытался стилями сделать(w:100% h:auto), что-то не очень получилось. Кажется css достаточно будет.

скрин того что хочу увидеть приложил

Answer 1

Картинку перенес в background.

Добавил стили:

height: 250px;
background-color: inherit;
background-size: 100% auto;
background-image: url(/upload/iblock/5bc/5bc8b08….jpg);
background-repeat: no-repeat;
background-position: center;

Проблема решена

Answer 2

Проблема решена

Проверь-ка эту проблему при вертикальной картинке. А потом попробуй просто этот стиль:

{
  background-position: center;
  background-size:contain;
}
READ ALSO
CSS-анимация не работает для svg в <img>

CSS-анимация не работает для svg в <img>

Я пытаюсь анимировать SVG в теге image / object, но анимация не работает

185
Как сделать форму

Как сделать форму

Как сделать такую форму в bootstrapЕсть, где это можно будет прочитать

182
Плавное перемещение картинки

Плавное перемещение картинки

Хочу сделать плавное смещение изображения на определенное количество пикселей при нажатии, моментальное перемещение уже написал, теперь...

174
Мерцание before на Windows XP

Мерцание before на Windows XP

http://fdmmebelxn----9sbcmm5bu9h

180