首页 > 代码库 > 图片自适应缩放
图片自适应缩放
1、img元素
img{max-width: 100%; height: auto;}
2、背景图片
通过修改背景图片宽度高度达到适应显示。
使用到css3的background-size,只支持IE9以上版本及现代浏览器。
background-size: percentage | length | cover | contain;
length: 设置背景图像的高度和宽度,第一个值设置宽度,第二个值设置高度;如果只有一个值,则第二个值会被设置auto。
percentage: 以父元素的百分比来设置背景图像的高度和宽度。
cover: 扩展背景图像完全覆盖背景区域。
contain: 把背景图像扩展到最大尺寸,以使其高度和宽度完全适应内容区域。
background-size: 100% auto;按照父元素宽度100%,高度自适应缩放;同理background-size: auto 100%;按照父元素高度100%,宽度自适应缩放。
图片自适应缩放
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。