如何使用css缩放图像以填充div保持纵横比？

Question

我想填充一个div img,保持纵横比,并根据需要拉伸宽度或高度.

<div style="width: 80px; height: 80px">
    <img src="..." />
</div>

我怎么能实现它？如果图像不是二次方,则必须"放大"并且要么是上下或左右,要么是哪一侧是较大的一侧.此外,图像应该在中心之后,以便角落被均等地切割.

我试过(但没效果):

.thumb {
    max-width:100%;
    max-height:100%;
}

如果我添加额外的width: 100%; height:100%;,图像完全适合,但调整大小不保持aspect ratio.

Answer 1

以下是诀窍:

    width:100%;
    height:100%;
    object-fit: cover;
    overflow: hidden;

Answer 2

使用时max-width,图像将包含在div内部,不会有溢出.

如果使用min-width,则较短的一侧将恰好是div的100%,而另一侧可以更长.为了使图像居中,我们可以使用平移和相对定位.

以下代码有效.

div {
  overflow: hidden;
} 
.thumb {
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  position: relative;
  left: 50%;
  top: 50%;
}

Answer 3

要保持图像的纵横比,只需指定一个维度:

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    overflow: hidden;
}

img {
    height: 100%;
}

这将产生以下效果:

但是,正如您所看到的,小猫不是中心,但您可以使用Flex框对其进行排序.

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

img {
    flex: 1;
    height: 100%;
}

Answer 4

使用背景大小：封面

div{
  background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg);
  background-size:cover;
  }

<div style="width:80px;height:80px;"></div>

Answer 5

.thumb {
    max-width:100%;
    height:auto;
}

或者（允许放大和缩小，如果放大的话看起来会像素化，上面的内容只会缩放到图像的最大尺寸）

.thumb {
    width:100%;
    height:auto;
}

就是您正在寻找的。

有关响应式图像的更多信息：

1. http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

2. http://www.w3schools.com/css/css_rwd_images.asp