代码之家 › 专栏 › 技术社区 › principal-ideal-domain

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

center scale image css html

0

principal-ideal-domain · 技术社区 · 4 年前

这是我的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布局或任何你想要的!

1 回复 | 直到 4 年前

1

3

tacoshy 4 年前

添加 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>

2

0

Jorge Monte 4 年前

我的解决方案很简单:

div{ 
  width: 40px;  //or whatever size you need
  height: 40px; //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的组合是必要的。