如何在 div 容器中自动裁剪和居中图像

Question

这是我的html代码

<div><img src="picture1.jpg" /></div>
<div><img src="picture2.jpg" /></div>
<div><img src="picture3.jpg" /></div>

我的 div 容器具有某些固定尺寸：

div{
    width: 400px;
    height: 400px;
    object-fit: cover;
    overflow: hidden;
}
img{
    height:100%;
    width: 100%;
    display: block;
}

而且我想在 div 容器内显示尽可能多的图像中间部分（并裁剪掉图像的其余部分）。因此，根据图像的尺寸，我想从图像的左右或顶部和底部裁剪一点。这样就会显示图像中最大的正方形。这个正方形应该居中，当然也相应地缩放。

我之前尝试了很多，也看了很多帖子。例如 this one。问题是对于不同的图像尺寸，没有任何东西对我有用（请记住，我不想为不同的图像调整代码）。我要一码一码！

html代码保持原样。只有 css 才能使其工作（所以我不想使用背景图像）。但我愿意接受最先进的 CSS 东西。使用 flex 布局或任何你想要的！

Answer 1

向图像添加 object-fit: cover; 以在不拉伸图像的情况下填充给定尺寸。还使用 height: 100%; width: 100%; 确保图像仅采用给定的 space.

图片默认居中。

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

/* for demonstration only */

div {
  margin-bottom: 20px;
}

div:nth-of-type(1) {
  width: 200px;
  height: 50px;
}

div:nth-of-type(2) {
  width: 200px;
  height: 100px;
}

div:nth-of-type(3) {
  width: 200px;
  height: 200px;
}

<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>

Answer 2

我的解决方案很简单：

div {
  width: 200px; /* or whatever size you need */
  height: 200px; /* or whatever size you need */
  position: relative;
  overflow: hidden;
}

div img {
  max-width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div><img src="https://via.placeholder.com/300x600.jpg"></div>

这个解决方案的缺点是任何图像的比例都非常不同。在这种情况下，最小高度（例如）与 div 相同大小的组合是必要的。

如何在 div 容器中自动裁剪和居中图像

How to automatically crop and center an image in div container

html

css

image

center

scale