javascript - 如何使照片适合其容器

Question

这里我有div一个 class="container"，里面div有一个img，我希望图像覆盖所有父 div，无论它是什么大小，我还希望图像保持其纵横比，最重要的是也就是说，如果另一个值（宽度、高度）更大，则宽度或高度都应为 100%。

如果图像是 2:1 纵横比，则高度应为 100% 以覆盖所有 div 并关闭所有间隙。

希望你能理解我，谢谢

.container{
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
}

<div class="container">
  <img src="https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" alt="img">
<div/>

Answer 1

object-fit属性在这里可能会派上用场。

为您的图像添加一个类，例如.image. 然后提供以下样式：

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

这应该够了吧。检查 object-fit 的其他值，以了解您将来如何设置这样的图像样式。

随意在这里玩一个演示。

Answer 2

使用 CSSobject-fit: cover

// demo showing size adjusting at different sizes
const container = document.querySelector(".container");
const range = document.querySelector("input[type='range']");

range.addEventListener("input", () => {
  container.style.width = `${range.value}px`;
});

.container {
  width: 250px;
  height: 250px;
  background-color: red;
  overflow: hidden;
}
img {
  min-width: 100%;
  object-fit: cover;
}

<div class="container">
  <img src="https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" alt="img" />
</div>
<label for="range">Width of container</label>
<input type="range" name="range" min="1" value="250" max="600" />

Answer 3

您还可以将图像用作具有背景大小的容器的背景图像：封面。

.container{
  width: 250px;
  height: 250px;
  background-image: url("https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg");
  background-size: cover;
}