Как сделать отзывчивое изображение?

Question

[Александр Вульф]

Добрый день! Подскажите, пожалуйста, как сделать так, чтобы картинка была определенной ширины и высоты, но не больше чем 100%?
Сделать это не составляет труда, однако, надо как-то сообщать ширину/высоту, иначе картинка становится растянутой.

Пример: https://jsfiddle.net/5fs3dkqj/
Как можно решить? Желательно без JS, но можно и с ним :) Размер исходной картинки есть.

P.S: Такой вопрос возник из-за того, что при загрузке сайта (а равно при смене изображения) все скачет, так как картинка не знает ее высоту. А если высоту задать, то она становится растянутой.

Comments

[Андрей]

"отзывчивое" же

[Александр Вульф]

Андрей: исправил :)

Answer 1

[Kovalsky]

img {
  max-width: 100%;
}

Comments

[Александр Вульф]

В примере я его задавал и видно, что из этого получается.

[Kovalsky]

Александр Вульф: также в вашем примере видно, что заданы ещё некоторые лишние стили. Если вы просто зададите максимальную ширину, всё будет нормально

[Александр Вульф]

Никита Полевой: при загрузке картинки текст "подпрыгнет" и будет ползти вниз вместе с загрузкой картинки.

[Kovalsky]

Александр Вульф: это-то я понял. Дело в том, что это не имеет отношения к полуофициальному термину "отзывчивый", поэтому никому даже в голову не пришло, что вас интересует поведение изображения/блока с изображением до загрузки соответствующих изображений.

Ну, если я все правильно понимаю, то до загрузки изображения браузер не имеет никакой информации о нём, в том числе о его размерах, поэтому не существует способа как-то попросить браузер угадывать ratio изображения.

Зато можно
1) скрыть процесс загрузки, например с помощью прелоадера,
2) исключить процесс загрузки, с помощью base64,
3) отдавать клиенту разметку, в которой будет указан ratio для каждого блока-обёртки, чтобы они изначально были нужных размеров.

Более ни до чего не додумался.

[Александр Вульф]

Никита Полевой: вот это уже другое дело) Помечаю как решение, можешь закинуть 3 пункт в ответ, чтобы другим было проще найти?)) И спасибо тебе огромное!

Answer 2

[Максим]

Сделайте обертку, туда передавайте нужные размеры (https://jsfiddle.net/5fs3dkqj/2/)

Comments

[Александр Вульф]

Не так, не пойдет. Теряется адаптивность :(

[Kovalsky]

Александр Вульф: вас никто не заставляет указывать те размеры, которые привёл Максим, можете сделать всё адаптивным

[Александр Вульф]

Никита Полевой: но тогда картинка ничего не будет знать о высоте. А мне надо чтобы и высота и ширина была адаптивной.

[Kovalsky]

Александр Вульф: в привёденном мною примере всё адаптивное. Ну вообще всё. Что значит "картинка ничего не будет знать о высоте" ?

[Александр Вульф]

Никита Полевой: это значит, что контент, стоящий под ней будет прыгать, пока картинка совсем не загрузится.

[Максим]

Александр Вульф: чтобы контент не прыгал, вам нужно установить высоту блока-обертки.

[Kovalsky]

Александр Вульф: я не знаю, как такое можно сделать с помощью css. Вероятно, можно решить проблему радикальным способом - base64 xD

[Максим]

Никита Полевой: я про fix высоту.

Answer 3

[GreatRash]

object-fit
пример для нормальных браузеров
замазка

Comments

[Александр Вульф]

GreatRash, хороший способ, спасибо. Но я не знаю высоту картинки. Точнее, знаю ее, но не знаю ее если ширину нужно ужать. Будут большие дырки :(

Answer 4

[Алексей Сироткин]

img {width: 100%; max-width: 100%; height: auto;}

если не нужно на всю ширину, то width: 100% уберите