我如何在16：9图像上使用对象拟合？

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>

Answer 1

您可以写：

.container {
  max-width: 300px;
}

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