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

我试图弄清楚如何调整图像的大小，以使其保持高宽比，但是要调整大小，直到图像的高度与包含div的高度匹配为止。我有这些非常大和很长的图像（屏幕快照），我想将它们放入200px宽，180px高的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%;
}

如您所见，图像父容器上显示灰色，根本不显示灰色。为了完全填充该容器，宽度需要在两侧均等地溢出。这可能吗？是否也可以考虑太高的图像？

原始答案：

如果您准备选择CSS3，则可以使用css3 translation属性。根据更大的尺寸调整大小。如果您的高度大于容器的宽度，宽度小于容器的宽度，则宽度将被拉伸到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的起始位置获取起始坐标（原点）。

图像被设置为BLOCK元素，min-width/height两者都设置为100％意味着无论图像大小是其父图像的最小100％，都将调整图像的大小。min是关键。如果按最小高度计，图像高度超过了父代的高度，则没问题。它将查找最小宽度，并尝试将最小高度设置为父母的100％。反之亦然。这样可确保div周围没有缝隙，但图像始终较大并被修剪overflow:hidden;

现在image，这个被设置为absolute与位置left:50%和top:50%。指从顶部和左侧推动图像50％，以确保原点来自DIV。左/上单位是从父级开始测量的。

魔术时刻：

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

现在，此translateCSS3transform属性功能可移动/重新定位有问题的元素。此属性处理所应用的元素，因此值（x，y）或（-50％，-50％）意味着将图像负向左移动图像尺寸的50％，并向负向顶部移动图像尺寸的50％ 。

例如。如果图片大小为transform:translate(-50%, -50%)200像素× 150像素，则将计算为翻译（-100px，-75px）。当我们拥有各种尺寸的图像时，％单位会有所帮助。

这只是找出图像质心和父DIV并进行匹配的一种棘手方法。

抱歉，解释时间过长！

阅读更多的资源：

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

更改您的代码：

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/

使用max-widthCSS属性，如下所示：

img{
  max-width:100%;
}

如果您使用Answer的Shekhar K. Sharma，并且几乎可以正常工作，则还需要添加thisheight: 1px;或this，width: 1px;因为它必须工作。

您可以使用弹性盒..这将解决您的问题

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