Вопрос:
<img>
не сжимает упаковку, как я ожидал бы с помощью min-width:100%
Я пытаюсь сжать <img>
, пока высота или ширина не совпадут с контейнером
Щелкните в любом месте <iframe>
для отображения форм контейнера
Попробуйте отредактировать
<img>
CSS:1) СОХРАНЕНИЕ АППАРАТА
2) ПОКРЫТИЕ ПОЛНАЯ ПОВЕРХНОСТЬ ОБЛАСТИ КОНТЕЙНЕРА DIV
3) ТОЛЬКО ИЗМЕНИТЬ ИЗОБРАЖЕНИЕ
Этот подход к центрированию выглядит как эскиз, но он довольно прочный
Мой вопрос конкретно: масштабируйте <img>
до FILL (поддерживайте пропорции, но покрывайте всю поверхность) родительского <div>
, даже когда родительский <div>
изменяет размер
Возможно, я как-нибудь смогу использовать css flex box-layout или что-то еще? Может быть, трансформация?
ANSWER
Установите источник HTML в прозрачный base64-пиксель (кредит CSS-трюки)
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
Использовать свойство фона CSS
#img {
width: 100%;
height: 100%;
background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
background-size: cover;
}