如何使用CSS缩放图像以填充一个div并保持纵横比？

16 浏览
0 Comments

如何使用CSS缩放图像以填充一个div并保持纵横比？

我想要用一个标签填充一个div，保持宽高比并且根据需要拉伸宽度或高度以适应。

我该如何实现？如果图片不是正方形的，它必须被"放大"，并且根据哪一边更大来裁剪顶部-底部或左右两侧。此外，图片应该居中，以便四个角被均等裁剪。

我尝试了以下代码（但没有效果）：

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

如果我添加额外的`width: 100%; height:100%;`，图片将完美适应，但不保持宽高比。

0

3 答案

0 Comments

问题的原因是无法通过CSS来实现保持图片纵横比例的同时填充一个div，并且图片在div中居中显示。第一种方法只指定了一个维度的尺寸，导致图片不会居中。第二种方法使用了Flexbox布局来居中图片，但是图片的宽度仍然没有完全填充父元素。

解决方法是使用背景图像来填充div，并通过设置background-size属性来保持图片的纵横比例。代码如下：

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    background-image: url('https://i.stack.imgur.com/jqLVj.png');
    background-size: cover;
    background-position: center;
}

这样，图片将会自动调整大小以填充div，并且保持纵横比例。同时，图片也会居中显示在div中。

效果如下：

![kitten](https://i.stack.imgur.com/jqLVj.png)

通过这种方法，我们可以实现图片的缩放，保持纵横比例，并且图片居中显示在div中。

0
0 Comments

如何使用CSS对图像进行缩放以填充一个div并保持纵横比？

问题的原因是，当我们尝试使用CSS将图像放入一个div中并保持其纵横比时，可能会遇到一些困难。我们可能会发现，使用max-width属性，图像将被包含在div内，不会出现溢出。但是，如果我们使用min-width属性，那么较短的一边将恰好占据div的100%，而另一边可能会更长。

为了解决这个问题并使图像居中，我们可以使用transform和相对定位。我们可以使用translate(-50%, -50%)将图像向左上方偏移50%，然后使用相对定位将图像向右下方偏移50%。这样，图像将在div中居中显示。

以下是解决问题的代码：

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

0
0 Comments

问题的出现原因：

在CSS中缩放图像以填充一个div并保持纵横比的问题。

解决方法：

下面的代码可以解决这个问题：

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

需要注意的是，这种解决方法在Internet Explorer中不起作用。同时，对于那些声称“所有提出的解决方案都不起作用”的说法，对我来说有点奇怪，因为来自MoLow、Greg和我自己的解决方案似乎都起作用。此外，使用object-fit: scale-down;，然后再使用overflow: hidden;是多余的。非常感谢这个解决方法，对我来说非常有用。包括高度是我之前遗漏的部分。一旦结合了宽度、高度和object-fit:cover;，一切都能完美地工作（前提是外部div有一个确定的宽度和高度来确定其在页面上的大小和位置）。

0