Есть ли способ указать максимальную высоту или максимальную ширину для изображения?

Question

Есть ли в любом случае поддерживать следующее соотношение сторон с максимальной шириной или максимальной высотой, ниже приведены ситуации, с которыми я сталкиваюсь. максимальная ширина или высота должна быть 500px

400x300 image - no resizing (both sides below 500 maximum size)
500x500 image - no resizing (both sides at exactly 500 maximum size).
600x400 image - resize to 500x333 (preserves same ratio) as one side is over 500 pixels.
1000x1200 image -resize to 417x500 (preserves same ratio), as both sides are over 500 pixels

Answer 1

Установка свойств CSS max-width и max-height на предельные значения, при этом оставляя изображение с auto для его width и height, можно использовать для поддержания соотношения сторон при ограничении максимального размера, например:

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 500px;
  max-height: 500px;
}

<img src="https://via.placeholder.com/50x50" />
<img src="https://via.placeholder.com/500x100" />
<img src="https://via.placeholder.com/100x500" />
<img src="https://via.placeholder.com/1000x200" />
<img src="https://via.placeholder.com/200x1000" />

Размер изображений, превышающих 500 пикселей, будет изменен в соответствии с ограничением, в то время как изображения меньшего размера сохранят свой первоначальный размер.