确保pc中banner图居中显示
Git项目地址Git
<div class="banner">
<img src="./banner33.jpg" alt="">
</div>
.banner {
position: relative;
height: 615px;
width: 100%;
// background-color: #eee; // 与图片边缘同色的颜色
}
.banner img {
position: absolute;
top: 0;
left: 50%;
margin-left: -960px;
}
- 其中height的高度为图片高度,为了让图片不发生形变,margin-left的值是图片宽度的一半。
- 为了更好的显示效果,当网页宽度超出图片的宽度后,可以给.banner设置与图片边缘同色的背景色
所有评论(0)