Как изменить размер к соответствующему тегу img? - PullRequest
Новая
       9

Как изменить размер к соответствующему тегу img?

16 голосов
/ 21 апреля 2011

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

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

а не 

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

или нет 

<img src="asd.jpg"/>

а потом еще свитки ..

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

Ответы [ 3 ]

39 голосов
/ 21 апреля 2011

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

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />
5 голосов
/ 21 апреля 2011

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

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

(рекомендуется всегда давать максимальную ширину изображения 100% для мобильных браузеров и т. Д.)

1 голос
/ 21 апреля 2011

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

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

...