解决办法:在设置图片的 css 里增加 background-size 属性。
问题原因分析:没有设置图片原比例完整显示。
问题截图:
问题代码片段:
.item:nth-child(1) {
background-image: url("../assets/1.jpg");
}
解决后效果图:
修改后代码片段:
.item:nth-child(1) {
background-image: url("../assets/1.jpg");
/* 比例不变,完整显示*/
background-size: contain;
/* 图片比例不变,将元素铺满 */
background-size: cover;
/* 背景图片大小,第二个属性默认auto */
background-size: 100% 100%;
}