网站开发的成果,网站建设分金手指专业十四,展示网站源码下载,怎么建立CSS 图片属性指南#xff1a;background-size 和 object-fit 在前端开发中#xff0c;使用图片是非常常见的。为了让图片在网页中显示得更好#xff0c;CSS 提供了多种属性来调整和控制图片的大小和布局。其中#xff0c;background-size 和 object-fit 是两个常用的属性background-size 和 object-fit 在前端开发中使用图片是非常常见的。为了让图片在网页中显示得更好CSS 提供了多种属性来调整和控制图片的大小和布局。其中background-size 和 object-fit 是两个常用的属性它们可以根据需要调整图片的大小和适应方式。 一、background-size 属性 background-size 属性用于调整背景图片的大小。它可以使用以下几个值 1.cover将背景图像等比缩放并完全覆盖容器可能会出现部分图像被裁剪的情况。
.background{background:url(../../assets/1.jpg);background-size:cover;
}2.contain将背景图像等比缩放并尽量完整地显示在容器内
.background{background:url(../../assets/1.jpg);background-size:contain;
}3.length指定背景图像的宽度和高度
.background{background:url(../../assets/1.jpg);background-size:200px 200px;
}4.percentage指定背景图像的宽度和高度相对于容器的百分比
.background{background:url(../../assets/1.jpg);background-size:50% 70%;
}二、object-fit 属性
object-fit 属性用于调整标签中的图片的大小和适应方式。它可以使用以下几个值 1.fill将图片拉伸以充满元素可能会导致图片失真。
.img{width:100px;height:100px;object-fit:fill;
}2.contain将图片等比缩放并尽量完整地显示在元素中。
.img{width:100px;height:100px;object-fit:contain;
}3.cover将图片等比缩放并完全覆盖元素可能会出现部分图像被裁剪的情况。
.img{width:100px;height:100px;object-fit:cover;
}4.scale-down根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。
.img{width:100px;height:100px;object-fit:scale-down;
}如下代码实现的效果可看出第三章图片更清晰 div stylewidth:100px;height:100pximg styledisplay:inline-block;width:100%;height:100% src../../assets/1.jpg alt/divdiv stylewidth:100px;height:100pximg styledisplay:inline-block;width:100%;height:100% src../../assets/2.jpg alt/divdiv stylewidth:100px;height:100pximg styleobject-fit:cover;width:100px;height:100px src../../assets/1.jpg alt/div/div通过使用 background-size 或 object-fit 属性我们可以很方便地调整和控制图片的大小和适应方式。
