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

Question

我想弄清楚如何调整图像的大小以使其保持宽高比，但会重新调整大小直到图像的高度与包含的 div 的高度匹配。 我有这些非常大和长的图像（屏幕截图），我想将它们放入宽度为 200 像素、高度为 180 像素的 div 中进行显示，而无需手动调整图像大小。 为了使它看起来不错，图像的两侧需要溢出并被包含的 div 隐藏。 这是我到目前为止所拥有的：

http://jsfiddle.net/f9krj/2/

HTML

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

如您所见，图像父容器上显示的是灰色，根本不应该显示。 为了使该容器完全装满，两侧的宽度需要相等。 这可能吗？ 是否也可以解释一个也太高的图像？

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 设置为relative位置。 这意味着所有子元素都将从该 DIV 开始的位置获得起始坐标（原点）。

图像设置为块元素， min-width/height都设置为 100% 意味着调整图像大小，无论其大小是其父元素的 100% 的最小值。 min是关键。 如果通过min-height，图像高度超过了父级的高度，没问题。 它将寻找 if min-width 并尝试将最小高度设置为父级的 100%。 反之亦然。 这确保了 div 周围没有间隙，但图像总是大一点，并且会被overflow:hidden;修剪掉overflow:hidden;

现在image ，这被设置为left:50%和top:50%的absolute位置。 意味着将图像从顶部向左推 50%，确保原点取自 DIV。 左/上单位是从父级开始测量的。

神奇时刻：

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

现在，CSS3 transform属性的这个translate函数移动/重新定位一个有问题的元素。 此属性处理应用的元素，因此值 (x, y) OR (-50%, -50%) 表示将负片图像向左移动图像尺寸的 50%，并将负片顶部移动图像尺寸的 50% .

例如。 如果图像大小为 200px × 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/

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/

Answer 3

使用 CSS 的max-width属性，如下所示：

img{
  max-width:100%;
}

Answer 4

你可以为它使用 flex box ..这将解决你的问题

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

Answer 5

如果你使用答案的Shekhar K. Sharma，它几乎可以工作，你还需要添加到你的这个height: 1px; 或者这个width: 1px; 因为必须工作。

Answer 6

如果您所做的只是填充 div，这可能会帮助其他人，如果纵横比不重要，则响应。

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

Answer 7

对我来说，最简单的方法是不使用 position absolute，翻译。

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