一般不同时设置图片的宽度和高度,只设置其中一个属性,以保持宽高比,图片不变形。
自适应高度的 div 包裹 img,img 下方有一小段空白:
原因: 图片默认的 vertical-align 是 baseline(元素放置在父元素的基线上,也就是下边距)。
解决方法:
- 设置图片的 vertical-align 不为 baseline。
- 设置图片的 display 为 block。
- 设置 div 的 line-height 为 0 或者 font-size 为 0。
background 背景图片过大只显示一部分:
解决方法:设置 background-size:100% 100%;
。
.content{
background-image: url('../assets/pc/home/bg.jpg');
background-size:100% 100%;
}