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

13 浏览
0 Comments

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

我正在尝试找出如何调整图像的大小，使其保持宽高比，但调整大小直到图像的高度与包含div的高度匹配。我有一些相当大且长的图像（屏幕截图），我想将它们放入一个宽度为200px，高度为180px的div中进行展示，而不需要手动调整图像的大小。为了使其看起来好看，图像的两侧需要溢出并被包含div隐藏。这是我目前的代码：\nhttp://jsfiddle.net/f9krj/2/\nHTML\n

\nCSS\n

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

\n如你所见，图像的父容器上显示了灰色，这是不应该显示的。为了使容器完全填充，宽度需要在两侧平均溢出。这种操作是否可行？是否还可以处理过高的图像？

0

3 答案

0 Comments

如果您有自由的宽度空间，但是受到父元素限制的高度，该怎么办呢？

0
0 Comments

问题出现的原因是想要设置图片的大小相对于父元素的高度。解决方法是将代码从原来的设置图片宽度为100%改为设置图片宽度为auto（保持长宽比）并设置图片高度为100%。这样可以根据父元素的大小来设置图片的高度和宽度，而不会裁剪图片。这个解决方法可以在这个链接中找到。这是一个完美的解决方案，非常感谢！

0
0 Comments

问题的原因是原作者想要通过CSS设置图像的大小相对于父元素的高度。解决方法是使用CSS3的translate属性，在图像宽度和高度小于容器的情况下，根据较大的那个进行调整。通过设置DIV元素的相对定位和图像元素的绝对定位，以及使用transform属性的translate函数来实现图像的居中和缩放。

具体的解决方法如下所示：

HTML部分：

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

以上是解决问题的代码和解释。通过将父元素设置为相对定位，子元素设置为绝对定位，并使用transform属性的translate函数将图像居中，可以实现图像大小相对于父元素的高度进行调整。在此过程中，使用了CSS3的新特性和技巧，通过调整图像的位置和大小，实现了图像在容器中的居中显示和缩放。

参考文献：

- [CSS3 transform属性的translate函数](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate)

- [CSS居中指南](https://css-tricks.com/centering-css-complete-guide/)

这种方法可以实现预期效果，但是可能会有一些理解上的困惑。希望有人可以解释一下。

0