如何仅使用 CSS/HTML 拉伸/收缩任何尺寸的图像以最适合正方形？

Posted 2023-03-05

【中文标题】如何仅使用 CSS/HTML 拉伸/收缩任何尺寸的图像以最适合正方形？

【英文标题】：How can I stretch/shrink any size image to best fit a square, with only CSS/HTML?

【发布时间】：2016-08-16 19:42:08

【问题描述】：

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

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

如何放大或缩小放置在 DIV 中的任何图像以最好地填充框？我的目标是图像的一个轴始终为 500px，而另一个轴调整大小以适应。 （这意味着如果图像不是完全正方形，垂直图像的图像两侧总会有空白区域，水平图像的图像上方和下方总会有空白区域。没关系。）

我知道我可以使用 JS 或服务器端的东西来对图像大小进行一些数学运算并以这种方式即时计算新的尺寸，但我正在寻找一个纯 CSS 的解决方案。 flexbox 能做到这一点吗？

【问题讨论】：

如果您设置尺寸（宽度、高度、最大宽度、最大高度），您的图像将扩展。不好看。如果您的用户上传图像，您可以让他们裁剪图像。（设置裁剪正方形的大小 500*500px）。这样他们就可以处理它并使其正确。

可能重复：***.com/q/34301340/3597276

检查旧答案并找到了这个。我请您接受/支持最有用的答案。

【参考方案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>

【参考方案2】：

这里是解决方案：查看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" >
</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;