如何调整img标签的大小?

时间:2011-04-21 19:05:55

标签: html css image resize

我想在小窗口中显示图像,但我需要节省图像的比例(我仍然希望人们可以知道它是什么)。 例如,假设图像是1000X200像素,并且有一个div定义为: 身高:100px; 宽度:100px; 所以我希望图像会这样写:

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

而不是

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

<img src="asd.jpg"/>

然后有滚动..

我可以使用百分比,但我该怎么做..(它甚至可以单独使用百分比吗?)

3 个答案:

答案 0 :(得分:36)

如果您在CSS中设置max-heightmax-width,现代浏览器会将其限制为该大小,但保持宽高比正确:

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

答案 1 :(得分:5)

如果您的父div设置了widthheight,则可以将img的最大宽度和最大高度设置为100%

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

(对于移动浏览器等,图片最大宽度为100%总是一个好习惯。)

答案 2 :(得分:1)

如果你使用javascript,你可以简单地得到图像的高度和宽度,然后除以另一个得到一个比率,然后将div的高度和宽度乘以该比率,然后将img维度设置为那些号。

显然,这是一种非常简单的说法,但我也不确定你是想用JS做这个还是使用严格的CSS解决方案。