我想在小窗口中显示图像,但我需要节省图像的比例(我仍然希望人们可以知道它是什么)。 例如,假设图像是1000X200像素,并且有一个div定义为: 身高:100px; 宽度:100px; 所以我希望图像会这样写:
<img src="asd.jpg" height=20 width=100 />
而不是
<img src="asd.jpg" height=100 width=100 />
是不是
<img src="asd.jpg"/>
然后有滚动..
我可以使用百分比,但我该怎么做..(它甚至可以单独使用百分比吗?)
答案 0 :(得分:36)
如果您在CSS中设置max-height
和max-width
,现代浏览器会将其限制为该大小,但保持宽高比正确:
<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />
答案 1 :(得分:5)
如果您的父div
设置了width
和height
,则可以将img
的最大宽度和最大高度设置为100%
:
div {
width: 100px;
height: 100px;
}
div > img {
max-width: 100%;
max-height: 100%;
}
(对于移动浏览器等,图片最大宽度为100%总是一个好习惯。)
答案 2 :(得分:1)
如果你使用javascript,你可以简单地得到图像的高度和宽度,然后除以另一个得到一个比率,然后将div的高度和宽度乘以该比率,然后将img维度设置为那些号。
显然,这是一种非常简单的说法,但我也不确定你是想用JS做这个还是使用严格的CSS解决方案。