如何使用CSS/HTML将任意大小的图像拉伸/缩小以最佳适应正方形？

Question

我有一个完全正方形的DIV - 500 x 500px。

我将在该DIV中显示未知大小的图像......有些图像是水平的，有些是垂直的；有些大于500像素高或宽，有些小于500像素高或宽。 我不能控制图像大小。

如何让我放置在DIV中的任何图像都可以扩展或缩小以最佳方式填充框？ 我的目标是图像的一条轴始终为500px，另一条轴调整大小以适应。（这意味着如果图像不完全正方形，则对于垂直图像，图像两侧将始终有空白区域，对于水平图像则在图像上下方留有空白区域。那没关系。）

我知道我可以使用JS或一些服务器端来对图像大小进行数学运算，并动态计算新尺寸，但我正在寻找仅使用CSS的解决方案。 flexboxes能实现这一点吗？

- Eric

---

如果您设置图像的大小（宽度、高度、最大宽度、最大高度），则无法进行任何操作，因为您的图像将会扩展，看起来不好。 如果您的用户上传图像，则可以让他们裁剪图像（设置裁剪正方形的大小为500*500像素）。 这样他们就可以处理并使其正确。 - Farhad

可能是重复问题：http://stackoverflow.com/q/34301340/3597276 - Michael Benjamin

查看以前的答案并找到了这个。我可以请您接受/点赞最有用的答案吗？ - Asons

Answer 1

由于CSS object-fit属性仍然不被广泛支持，而您有一个固定的容器，为什么不使用background-image:.../background-size:contain呢？

.image {
  height: 500px;
  width: 500px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid red;                  /* to mark each box in this sample */
}

.nr1 {
  background-image: url(http://lorempixel.com/400/600/animals/1);
}
.nr2 {
  background-image: url(http://lorempixel.com/600/400/animals/3);
}

<div class="image nr1">
</div>

<div class="image nr2">
</div>

- Asons

Answer 2

您可以使用object-fit来实现此目的。为了使object-fit起作用，您必须为图像设置大小，因为我希望它覆盖整个框，所以我只需设置width: 100%

.image {
  height: 500px;
  width: 500px;
  border: 1px solid red;                  /* to mark each box in this sample */
}

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

<div class="image">
 <img src="https://via.placeholder.com/400x600" alt="">
</div>

<div class="image">
 <img src="https://via.placeholder.com/700x400" alt="">
</div>

- cloned

Answer 3

这是解决方案：请查看结果http://codepen.io/anon/pen/MyBXKZ。 HTML

<div class="image-wrapper">
<div class="image-container">
  <img src="http//images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="Sample image">
</div>

CSS

.image-wrapper {
  background-color: #fff;
  -webkit-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33);
  -moz-box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33);
  box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.33);
  height: 500px;
  width: 500px;
}

.image-container {
  text-align: center;
  line-height: 500px;
  height: 100%;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}

- Rahul K

Answer 4

使用`background-image`属性会使加载依赖于CSS，这有一些缺点，例如性能。因此，我想出了以下解决方案：

<div
  style={{
    display: "flex",
    width: "100%",
    height: "100%",
  }}
>
  <img
    style={{
      minWidth: "100%",
      minHeight: "100%",
      objectFit: "cover",
    }}
    alt=""
    src={url}
  />
</div>

以上代码将放大图像以便其覆盖父容器。
如果您只需适合容器尺寸，则将objectFit更改为contain。

- Raphael Setin