div+css可以实现图片等比例缩放吗

发布网友发布时间：2022-04-22 04:19

共1个回答

热心网友时间：2022-04-06 12:35

设置对应图片的width和htight的具体数值就可以了。举例一个：
1
2
3
4
5
6
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
1
2
3
4
<div style="width:50px;height:40px">
<img src="a.jpg">

</div>
根据上面4个css可以知道：
图片被缩放后在div的尺寸是：
width:50px;（因为图片的width:100%）
height:50px（这里height是在width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
width:40px;
height:40px;
这个尺寸符合max-height和max-width