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

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

    设置对应图片的width和htight的具体数值就可以了。举例一个：
img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
<div style=\"width:50px;height:40px\">
  <img src=\"a.jpg\">
  <!--这里我们假如图片的实际尺寸是320X320-->
</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

这是百度问答的一个回答, 我只想说二个字. 完美!

关注宁波网站建设博客，更多精彩分享，敬请期待！
 

Tags：

转载：感谢您对宁波网站建设博客网站平台的认可，以及对我们原创作品以及技术文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源宁波网站建设博客”。/view/901.html

很赞哦！ ()