CSS：如何设置图像大小相对于父元素的高度？

Question

我正在尝试找出如何重新调整图像大小，使其保持宽度和高度的比例，但调整大小时图像的高度要与包含它的 div 元素的高度匹配。我的这些图像相当大而且很长（屏幕截图），我希望将它们放入一个 200px 宽、180px 高的 div 容器中进行显示，而不需要手动重新调整图像大小。为了使它看起来好看，图像的两侧需要溢出并隐藏在容器 div 中。目前我已经做到了这一点：http://jsfiddle.net/f9krj/2/。

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

如您所见，图像的父容器上显示了灰色颜色，这完全不应该出现。为了使该容器完全填充，宽度需要在两侧均等地溢出。这种情况是否可能？对于太高的图像也可以进行处理吗？

- Jon McPherson

---

你尝试过使用CSS背景图片并设置background-size: cover;吗？ - CP510

使用 max-height:100%; 替代 width，fiddle。 - Patrick Evans

@CP510 是的，你说得对。我应该找出这个问题！http://jsfiddle.net/f9krj/4/ - Jon McPherson

可能是将图像宽度设置为父div的100％，但不大于其自身宽度的重复问题。 - T.Todua

Answer 1

翻译后的答案：

如果您准备选择CSS3，可以使用css3 translate属性。基于较大的值进行调整。如果您的高度比容器小，而宽度更小，则宽度将被拉伸到100％，并且高度将从两侧裁剪。同样适用于较大的宽度。

您需要的HTML：

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

而且，CSS：

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

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

看，它工作了：http://jsfiddle.net/shekhardesigner/aYrhG/

说明

DIV设置为相对定位。这意味着所有子元素将从此DIV开始的起始坐标（原点）获得。

图像被设置为块元素，min-width/height都设置为100%，这意味着将图像调整为它的父级的最小值，而不管其大小。min是关键。如果由于min-height，图像高度超过了父级的高度，没有问题。它会查找min-width并尝试将最小高度设置为父级的100%。两者互为反义词。这确保没有间隙围绕div，但图像始终稍微大一些，并被overflow:hidden;裁剪。

现在是image，这被设置为绝对位置，具有left:50%和top:50%。表示将图像向左和向上推动50%，确保原点取自DIV。左/顶部单位是从父级测量的。

神奇时刻：

transform: translate(-50%, -50%);

现在，CSS3的transform属性的此translate函数移动/重新定位一个问题中的元素。此属性处理应用的元素，因此值（x，y）或（-50%，-50%）表示将图像左移50%并将其大小减小，然后将其移到负上方50%的位置。

例如，如果图像大小为200px x 150px，则transform: translate(-50%, -50%)将计算为translate(-100px, -75px)。当我们有各种大小的图像时，%单位很有帮助。

这只是一种巧妙地找出图像和父DIV的质心并将它们匹配的方法。

对于解释时间过长词，我表示歉意！

更多阅读资源：

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

- absqueued

---

可以运行，但我不太明白。有人可以解释一下吗？ - geckob

这是 CSS 魔法的最高境界。 - Liz

由于它尚未被解释：有人可以解释一下吗？请随意编辑答案。 - anon

这样做是通过裁剪图像来缩小它，而不是进行重新调整大小。 - PiyaModi

Answer 2

修改你的代码：

a.image_container img {
    width: 100%;
}

转化为这样：

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

- Jacques ジャック

---

这是完美的解决方案。谢谢！它根据父元素设置图像的高度和宽度，而不是裁剪图像。再次感谢！ - PiyaModi

Answer 3

使用CSS的max-width属性，像这样：

img{
  max-width:100%;
}

- UniCoder

---

如果您有充足的宽度空间，但受父级限制而受到高度限制，该怎么办？ - Normal

Answer 4

你可以使用弹性盒子布局来解决这个问题。

.image-parent 
{
     height:33px; 
     display:flex; 
}

- Sayed Muhammad Idrees

---

但是毕竟高度不是自动的。 - Normal

@普通高度由宽度控制。 - Sayed Muhammad Idrees

Answer 5

对我来说，不使用绝对定位和translate的最简单方法是：

<div class="img-container">
 <img src="yoururl" />
</div>

CSS应该如下所示：

.img-container {
 height:100px;
 width:100px;
 overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}

- idembele70

Answer 6

如果你采用了Shekhar K. Sharma的答案，它几乎可以工作，但你还需要在你的代码中添加height: 1px;或者width: 1px;才能确保它可以正常工作。

- StasNemy

Answer 7

如果您只是想填充 DIV，则这可能对其他人有所帮助，如果纵横比不重要，则响应式。

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}

- Harry Bosh