如何对 16:9 图像使用对象拟合？答案

【问题标题】：How do I use object-fit with a 16:9 image?如何对 16:9 图像使用对象拟合？
【发布时间】：2020-05-02 20:47:54
【问题描述】：

我正在尝试弄清楚如何使用object-fit 正确缩放 16:9 垂直图像。

我几乎尝试过任何事情都没有运气！

.container {
  width: 300px; /*any size*/
  height: 200px; /*any size*/
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}

<div class="container">
  <img class="object-fit-cover" src="https://jardim-plant-images-development.s3.amazonaws.com/hfj1h9jq2q8o8tyv1r6dxhi4zrmn">
</div>

预期结果（不使用object-fit:

.container {
  width: 300px; /*any size*/
  height: 200px; /*any size*/
  overflow: hidden;
}

.object-fit-cover {
  width: 100%;
  margin-top: -50%;
}

<div class="container">
  <img class="object-fit-cover" src="https://jardim-plant-images-development.s3.amazonaws.com/hfj1h9jq2q8o8tyv1r6dxhi4zrmn">
</div>

我希望我可以改用object-fit。对这种方法有什么想法？

【问题讨论】：

为什么需要这个比例？我要求了解上下文
您希望图像像 div 一样大吗？ (100%)
@Berto99 是的，我希望它缩放到整个宽度并保持其高度不变形。
尝试包含而不是覆盖
@TemaniAfif 没有骰子。我得到了类似的结果：jsfiddle.net/6L1opqds

标签： css image-scaling object-fit

【解决方案1】：

你可以写：

.container {
  max-width: 300px;
}

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

<div class="container">
  <img class="object-fit-cover" src="https://jardim-plant-images-development.s3.amazonaws.com/hfj1h9jq2q8o8tyv1r6dxhi4zrmn">
</div>

【讨论】：

这个问题是我想将容器保持为 200x200 或 300x300 的盒子。如果我将其设置为覆盖，我认为 object-fit 会保持纵横比。
@alvincrespo 所以你认为object fit: cover 尊重图像的纵横比？这种假设是不正确的。它不会，而是尝试以新的纵横比（在您的情况下是由其父级定义的纵横比）来适应图像。

【解决方案2】：

只需将position: relative 添加到容器中即可。这会指示其子项的宽度和高度与此容器的宽度和高度相关（在本例中为 200 x 200 像素）。

.container {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
  position: relative;
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}

<div class="container">
  <img 
    class="object-fit-cover" 
    src="https://jardim-plant-images-development.s3.amazonaws.com/hfj1h9jq2q8o8tyv1r6dxhi4zrmn">
</div>

如果你想让它响应，你应该添加一个额外的容器：

.container {
  width: 100%;
  max-width: 300px; /*any size*/
}

.innercontainer {
  padding-bottom: 100%; /* 1:1 ratio */
  position: relative;
}

.object-fit-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}

<div class="container">
 <div class="innercontainer">
  <img 
    class="object-fit-cover" 
    src="https://jardim-plant-images-development.s3.amazonaws.com/hfj1h9jq2q8o8tyv1r6dxhi4zrmn">
 </div>
</div>

【讨论】：