宁波网站建设咨询:宁波网站建设
137 8002 6116 宁波网站制作
首页
关于殷雯
网站建设
新闻/观点
网站案例
联系我们
殷雯动态
网站建设常见问答
网络推广
技术交流
PHP技术
你的位置:首页> 新闻/观点 > 网站建设常见问答>css控制网站图片按比例显示
网站建设常见问答
css控制网站图片按比例显示

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

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


点击:  766    时间: 2018-01-23
上一条: seo如何进行内链优化
下一条: 哪些因素影响了百度搜索排序?
 
 
 
快速通道: 关于我们    网站建设    主机域名    付款方式    我的声明
  
联系我们
手机扫描QQ
网站建设咨询:
咨询热线:
宁波殷雯网站建设工作室
地 址: 浙江省宁波市江东区
电 话: 137 8002 6116 
邮 箱:
330436190@qq.com
宁波网站建设
宁波网站制作
137 8002 6116
宁波殷雯网站建设工作室 版权所有