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

Question

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

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

超文本标记语言

html prettyprint-override"><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

使用CSS的最大宽度属性，如下所示：

img{
  max-width:100%;
}

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

如果您准备选择CSS3，则可以使用CSS3 translate属性。根据大小调整大小。如果你的高度比容器大，宽度比容器小，宽度将被拉伸到100%，高度将从两侧修剪。同样的情况也适用于较大的宽度。

您的需要，超文本标记语言：

<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%意味着将图像大小调整为其父对象的最小值，无论其大小如何<代码>最小值是关键。如果按最小高度，则图像高度超过父级高度，没有问题。它将寻找最小宽度，并尝试将最小高度设置为父母的100%。两者都是相反的。这确保了div周围没有间隙，但图像总是有点大，并通过溢出：隐藏来修剪

现在，将图像设置为绝对位置，左侧为50%，顶部为50%。意味着将图像从顶部和左侧推50%，确保原点取自DIV。左/顶部单位从父单位测量。

神奇时刻：

变换：平移（-50%，-50%）

现在，CSS3的transform属性的这个translate函数移动/重新定位了一个有问题的元素。该属性处理应用的元素，因此值（x，y）或（-50%，-50%）意味着将图像负片向左移动图像大小的50%，并将图像大小的50%移动到负片顶部。

例如，如果图像大小为200px×150px，变换：翻译（-50%, -50%)将计算为翻译（-100px，-75px）。%单位有助于当我们有不同大小的图像。

这只是找出图像和父DIV的形心并匹配它们的棘手方法。

抱歉花了太长时间解释！

阅读更多资源：

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate