Question

我想用img填充div，保持纵横比，并根据需要拉伸宽度或高度。

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

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

我尝试过（但没有效果）：

.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％，而另一侧可能更长。要使图像居中，我们可以使用translate and relative positioning。

以下代码有效。

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

答案 2 :(得分：5)

要保持图像的宽高比，只需指定一个维度：

foreach($json as $key => $value) {
  $elements = $value['elements'];
  foreach($elements as $key => $element) {
    echo "$key = {$element['type']}\n";
  }
  $title = $value['title'];
  echo "$key = $title\n";
}

这将产生以下效果：

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

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

img {
    height: 100%;
}

答案 3 :(得分：3)

使用background-size：cover

＆＃13;

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

＆＃13;

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

＆＃13;

答案 4 :(得分：2)

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

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

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

您在寻找什么。

有关自适应图片的更多信息：

答案 5 :(得分：1)

不确定是否有人还在看这篇文章。我在寻找一种使图像适合

的方法时遇到了这个问题，因为我使用的是悬停和伸出效果，因此在图像周围没有多余的空白。我的灵感来自Matt的解决方案。代替

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

我添加了

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

现在，我的图像完全适合

了，而这些图像上没有空白。

Answer 3

要保持图像的宽高比，只需指定一个维度：

foreach($json as $key => $value) {
  $elements = $value['elements'];
  foreach($elements as $key => $element) {
    echo "$key = {$element['type']}\n";
  }
  $title = $value['title'];
  echo "$key = $title\n";
}

这将产生以下效果：

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

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

img {
    height: 100%;
}

Answer 4

使用background-size：cover

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

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

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

您在寻找什么。

有关自适应图片的更多信息：

Answer 6

不确定是否有人还在看这篇文章。我在寻找一种使图像适合

的方法时遇到了这个问题，因为我使用的是悬停和伸出效果，因此在图像周围没有多余的空白。我的灵感来自Matt的解决方案。代替

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

我添加了

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

现在，我的图像完全适合

了，而这些图像上没有空白。

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

6 个答案: