Как в HTML поставить size и srcset атрибуты для IMG на max-width?

Question

[fridary]

У меня есть изображение шириной 50px и container шириной 500px. Используя код ниже изображение растягивается на 100%, то есть становится размазанным на 500px даже если я ставлю max-width: 100%

Как я могу отредактировать данный код, чтобы изображение стало 50px, при этом надо учитывать, что если на месте того изображения в 50px поставить любое другое больше 500px, то оно станет 500px как width=100% (то есть если < 500px, то реальный размер, если >= 500px, то размер 500px)?

К чему вопрос? У меня есть блог, в котором динамично добавляют новые изображения в статью при помощи php + javascript. Через php сохраняются изображения в размерах 50px, 200px и 500px. Несомненно, какие-то загружаемые изображения будут меньше 500px, поэтому я их не сохраняю и в srcset они не попадают (а иначе srcset="image_50.jpg 50w, image_200.jpg 200w, image_500.jpg 500w").

<div style="width: 500px;">
  <img src="image_50.jpg" sizes="100vw" srcset="image_50.jpg 50w" style="max-width:100%;">
</div>

https://jsfiddle.net/baL5cj0k/4/

Answer 1

[Odisseya]

Задайте для img:

img {
  object-fit: contain;
  max-width: 500px;
}

Ваш пример https://jsfiddle.net/v7w0jqLj/
Для фоллбека object-fit в IE и EDGE, используйте полифилл https://github.com/bfred-it/object-fit-images
NB атрибутами srcset, sizes вы можете давать браузеру альтернативный выбор по ширине вьюпорта или ретиновости экрана — тем параметрам, о которых браузер знает. Однако, про фактический размер изображения или соответствие изображения вьюпорту браузеру ничего не известно.

Comments

[fridary]

Спасибо за ответ, но в вашем же примере нет параметров sizes и srcset для img, а речь идет о них