问题:假设一个div盒子的宽度为1000px;高度为800px;div内有一个img图片,图片宽度为...
问题:
假设一个div盒子的宽度为1000px;高度为800px;div内有一个img图片,图片宽度为700px,高度为560px,如何将图片铺满整个div
方法:
img{
width:100%;
height:100%;
object-fit: cover;
}object-fit
object-fit
object-fit 是CSS3中的一个属性,用于设置元素(通常是 <img> 或 <video>)在容器中的显示方式。它有以下几个可选值:
fill:当元素尺寸和容器不匹配时,元素会被拉伸以填充整个容器。这可能会导致元素的宽高比被改变。contain:当元素尺寸大于容器时,元素会缩放以适应容器,保持其原始宽高比。当元素尺寸小于容器时,元素会按其原始尺寸显示。cover:当元素尺寸小于容器时,元素会放大以填充容器,保持其原始宽高比。当元素尺寸大于容器时,元素会被裁剪以适应容器。none:元素会按其原始尺寸显示,忽略容器的尺寸。scale-down:当元素尺寸大于容器时,元素会缩小以适应容器,保持其原始宽高比。当元素尺寸小于容器时,元素会按其原始尺寸显示(等同于none)。
样例代码:
.container {
width: 200px;
height: 200px;
border: 1px solid black;
}
.image {
width: 100%;
height: 100%;
object-fit: contain;
}在上述代码中,容器 .container 的宽度和高度都是 200 像素,其中的图片 .image 被设置为填充整个容器且保持原始宽高比,使用 object-fit: contain; 来实现。

漠漠睡