Как да променим размера на маркера на img подходящ? - html, css, изображение, преоразмеряване

Искам да покажа изображение в малки прозорци, но азтрябва да спестите от съотношението на изображението (все още искам хората да знаят какво е). Например нека да кажем, че изображението е 1000X200 пиксела и има div, който е дефиниран като: височина: 100px; ширина: 100px; Така че искам изображението да пише така:

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

и не

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

или не

<img src="/images/asd.jpg"/>

и тогава има свитъци ..

Мога да работя с проценти, но как да го направя .. (и дори работи само с проценти?)

Отговори:

Ако сте задали max-height и max-width в CSS съвременните браузъри ще го ограничат до този размер, но поддържат съотношението на страните правилно:

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

Ако вашият родител div има набор width и height, можете да зададете максималната ширина и максималната височина на img да се 100%:

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

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

Ако използвате javascript, можете просто да получитевисочина и ширина на изображението и разделете едно на друго, за да получите съотношение, след това умножете височината и ширината на div спрямо това съотношение, след което задайте размерите на img на тези числа.

Очевидно това е много опростен начин да го кажа, но аз също не съм сигурен дали искате да направите това с JS или да използвате строго CSS решение.