使用 CSS 裁剪/调整图像大小以更改纵横比答案

【问题标题】：To crop/resize an image to change the aspect ratio using CSS使用 CSS 裁剪/调整图像大小以更改纵横比
【发布时间】：2021-03-22 10:35:46
【问题描述】：

我有一个大小为 700 像素（宽度）x 333 像素（高度）的图像，其纵横比为 2.10。我想以 327 像素（宽度）和 183 像素（高度）的尺寸显示此图像，宽高比为 16：9。原始图像可以以最小失真进行裁剪或调整大小，每个元素的最终宽高比应为 16：9 并显示为327px（宽度）和 183px（高度）。以下是我尝试过的代码。 object-fit: cover; 工作正常，它可以裁剪图像并将其大小调整为 327 像素 X 183 像素，但所有/旧版本的浏览器都不支持它。有什么替代方法可以通过所有和旧版浏览器支持的 CSS 来实现相同的结果？

/*original image  :  http://starmoz.com/images/lancia-gamma5.jpg */

.cropAndResize {
    width: 327px;
    height: 183px;
    object-fit: cover;
}

<body>
  <div>
    <img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
  </div>
</body>

【问题讨论】：

仅使用 css 我认为您不会在 IE 浏览器上使用它。但是看看这里，它是一个很好的 polyfill：github.com/anselmh/object-fit
您之前已经发布过同样的问题：stackoverflow.com/questions/47760134/…

标签： javascript css html image

【解决方案1】：

出于裁剪目的，我经常在块或内联块类型的元素上使用背景图像，而不是依赖于 img 标签：

.cropAndResize {
    width: 327px;
    height: 183px;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url('http://starmoz.com/images/lancia-gamma5.jpg');
}

<body>
  <div class="cropAndResize"></div>
</body>

【讨论】：

这段代码给了我预期的结果，但background-image不能在这种情况下使用。
你的方案是什么？
背景中已经有另一个图像，当前图像应该放在它上面。
您始终可以将 div 作为图像来管理，将其放置在另一个 div 中，使用内联样式设置不同的背景图像，就像在 IMG 标签上填充 src 属性一样

【解决方案2】：

一个简单的解决方案可能是：

.cropAndResize {
  height: 183px;
  margin-left: -20px; 
}

div {
  width: 327px;
  overflow: hidden;
}

【讨论】：

它是 327 px，但图像未居中。这就是为什么它看起来不同。您可以添加 margin-left: -20px;到css中的.cropandresize

【解决方案3】：

也许这样的东西对你有用？唯一需要注意的是，您需要设置特定的边距以对齐容器内的图像以使其居中。

.crop {
    width: 327px;
    height: 183px;
    overflow: hidden;
    position: relative;
    border: 1px solid black;
}

.cropAndResize {
    position: absolute;
    min-width: 100%;
    max-height: 100%;
    margin: 0px 0px 0 -20px;
}

<body>
  <div class="crop">
    <img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
  </div>
</body>

【讨论】：