html图⽚平铺div，前端⼩知识——图⽚平铺问题
图⽚平铺有两种⽅式，直接写img标签或者通过background-image⽅式
1，img标签
HTML：
CSS:
.row{
margin:0,auto;
width:100%;
}
img{
width:100%;
height:100%;
margin: 0 auto;
display: block;
font-size: 0;
}
这样写的话，三张图⽚能够垂直平铺，且随着浏览器的缩放⽽缩放，可以添加alt关于图⽚的描述，利于SEO，且写法⽅便，不⽤考虑兼容性
2，background-image⽅式
HTML:
CSS:
.layout{
position: relative;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
}
.header{
background-size: cover;
div中的div居中background-image: url("img/header@2x.png");
padding-top: 11.875%;
}
在上⾯样式中，layout表⽰居中，最⼤宽度为640px，最⼩为320px，常⽤在⼿机端，
在header中设置padding-top: 11.875%；表⽰的是图⽚的⾼度和宽度⽐例
⼯作中遇到的问题
1，当设置⼀张图⽚向上移动且想覆盖上⼀张图⽚⼀部分，那么要绝对定位⼀下，且使⽤top，或者bottom的时候，虽然图⽚能上移下移但是上移后底部的空间还是要占据，这时候要使⽤margin-top：-n%；使⽤百分⽐是相对外层有定位的元素，⽽且能够随着浏览器缩放⼤概位置不变。
2，活动页⾯背景图宽度写死的⽅法
最外层div设置最⼤宽度和最⼩宽度，居中，且写背景⾊，或者在body写背景⾊，第⼆层div设置背景图，居中，最⼤宽度定死
HTML:
CSS:
body{
padding: 0;
margin: 0;
}
.bg{
margin: 0 auto;
max-width: 320px;
}
.img{
background-position: center;
height: 210px;
background: url("body-bg@2x.png");
background-size: 100% 100%;
}
3，在写⼿机端页⾯的时候有事设计稿⾼度不够，此时为了⾃适应满屏，需要在HTML和body中设置⾼度100%

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。