您现在的位置是：首页 > 网站建设常见问答网站建设常见问答

css控制网站图片按比例显示

2018-01-23【网站建设常见问答】3014 人已围观

简介当我们一个项目有万千上百的产品图片展示的时候,图片显示的比例是个大问题. 美工不可能空到把所有图片去处理一圈全部按网站某个比例调整....

当我们一个项目有万千上百的产品图片展示的时候,图片显示的比例是个大问题. 美工不可能空到把所有图片去处理一圈全部按网站某个比例调整.这是一个大大的工程. 所以我们的css这个时候就可以上场了.

设置对应图片的width和htight的具体数值就可以了。举例一个：
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
<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