CSS - 图片平铺、图片铺满,图片宽比div小怎么铺满整个div

问题:假设一个div盒子的宽度为1000px;高度为800px;div内有一个img图片,图片宽度为...

问题:

假设一个div盒子的宽度为1000px;高度为800px;div内有一个img图片,图片宽度为700px,高度为560px,如何将图片铺满整个div


方法:

img{
    width:100%;
    height:100%;
    object-fit: cover;
}


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; 来实现。

评论