html图片平铺div,前端小知识——图片平铺问题

时间:2025-04-01 16:55:34

图片平铺有两种方式,直接写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;

background-image: url("img/header@");

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@");

background-size: 100% 100%;

}

3,在写手机端页面的时候有事设计稿高度不够,此时为了自适应满屏,需要在HTML和body中设置高度100%