如何使照片适合其容器

Question

这里我有一个div和一个class="container"，在这个div里面有一个img，我想让图片覆盖所有parent 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

使用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 2

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

在你的图片中添加 class，比如 .image。然后提供以下样式：

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

这应该可以解决问题。检查 object-fit 的其他值，看看您将来还可以如何设置这样的图像样式。

欢迎试用演示 here。

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;
}

如何使照片适合其容器

How to make the photo fit to its container

html

javascript

css

image

object-fit