У меня есть изображение шириной 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/ 
Средний
