Как изменить размер тега img?

Я хочу показать изображение в маленьких окнах, но мне нужно сохранить соотношение изображения (я все еще хочу, чтобы люди знали, что это такое). Например, скажем, что изображение составляет 1000X200 пикселей, и есть div, который определяется как: высота: 100 пикселей; ширина: 100 пикселей; Поэтому я хочу, чтобы изображение было написано так:

<img src="asd.jpg" height=20 width=100 />

а не

<img src="asd.jpg" height=100 width=100 />

или не

<img src="asd.jpg"/>

а затем свитки.

Я могу работать с процентами, но как это сделать.. (и работает ли он даже с процентами?)

Ответ 1

Если вы установите max-height и max-width в CSS, современные браузеры будут ограничивать его до такого размера, но сохраняют соотношение сторон:

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />

Ответ 2

Если ваш родительский div имеет набор width и height, вы можете установить максимальную ширину и максимальную высоту от img до 100%:

div {
  width: 100px;
  height: 100px;
}
div > img {
  max-width: 100%;
  max-height: 100%;
}

(Всегда хорошая практика - показывать изображения max-width 100%, для мобильных браузеров и т.д.)

Ответ 3

Если вы используете javascript, вы можете просто получить высоту и ширину изображения и разделить один на другой, чтобы получить соотношение, а затем умножить высоту и ширину div на это отношение, а затем установить размеры img для этих числа.

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