如何在 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%; 确保图像只占用给定的空间。

图片默认居中。

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 的组合是必要的。