banner中的素材图和banner盒子的大小不合时,有以下两种添加方式
- 给图片限制宽度,让其等比缩放;
- 使用定位(图片最好绝对定位)、overflow属性、z-index属性共同编辑;
我的盒子代码:
<div class="banner_1">
<img src="../image/star.jpeg" alt="" class="t">
</div>
<div class="banner_2">
<img src="../image/star.jpeg" alt="" class="b">
</div>
第一种盒子的css样式
.banner_2{
position: relative;
top: 60px;
width: 100%;
}
.banner_2 img.b{
position: absolute;
width: 100%;
}
效果图:
缺点:图片高度过高了;
第二个盒子的css样式
.banner_1{
position: relative;
width: 100%;
height: 500px;
z-index: 1;
overflow: hidden;
}
.banner_1 img.t{
position: absolute;
top:0;
left: -30px;
z-index: 0;
}
效果图:
个人认为的优点:
- 可以设置图片的宽高;
- 可以以以截取所需的特定图片;
- 多余的范围不会影响整体页面的宽高;
第一个方法可以将图片完整的复刻出来,但是当图片的高度与banner盒子的大小不匹配,则会出现大量空白去;
第二个方法可以将过大的图片,
- 按照所需的高度,使用定位将图片固定在所需的位置
- 使用z-index,将banner盒子放在图片的上层;
- 使用overflow属性将图片大于banner盒子的范围进行隐藏;