如何对16:9的图像使用object-fit？

Question

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

我几乎什么都试过了，但都没有成功！

https://jsfiddle.net/pdocys3j/

​

.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。对这种方法有什么看法？

Answer 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>

​

Answer 2

只需将position: relative添加到容器中即可。这将指示其子对象的宽度和高度与该容器的宽度和高度相关(在本例中为200x200px)。

​

.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>

​