Question

现在有些东西折磨我了。我找不到任何方法让图像适合父母的身高。

我在这里遇到了很多问题，但没有人给我答案。

其中一些问题是：

CSS same height as Parent
Fit image to parent div's size
How can I resize an image dynamically with CSS as the browser width/height changes?
CSS: How can I set image size relative to parent height?
CSS: 100% width or height while keeping aspect ratio?
Make an image to fit it's parent dimensions
CSS: How can I set image size relative to parent height?

现在，问题在于每当我将图像插入父元素时，父元素的高度都不会拉伸。

图片：

http://es.tinypic.com/view.php?pic=2s1u1ec&s=9#.WLnbWvKE1jk

我正在尝试构建一个图像滑块，img必须绝对定位。

红色边框应该包裹图像，以及父级应该包裹整个图像加上填充。

一些代码：

HTML：

<section>
Gray: parent

    <div class="level0">
        <div class="container">
            <img src="1.jpg" alt="image">
        </div>
    </div>

</section>

CSS：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: auto;

  background-color: #565656;
}

section {
  position: relative;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 1%;

  background-color: #a1a4a8;
}

.level0 {
  position: relative;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;

  border: 4px solid red;
}

.level0 img {
  position: absolute;
  width: 100%;
}

我尝试过overflow：hidden，max-height，％等。唯一真正有用的是为父元素设置一个固定的高度，但这对我不利。我希望父母在图像的宽度上自动拉伸它的高度。

哦，还有一件事。我阅读了几个JQuery，JS或类似的答案，但我会很感激纯CSS的答案。显然，特雷尔必须是我所缺少的东西。

如果有任何令人困惑的事，请告诉我。谢谢你的帮助！

Answer 1

我认为没有办法动态调整绝对定位的图像。您必须为容器提供比图像大的设定高度。

编辑：@Michael Coker证明有一种方法可以做到这一点，但如果你问我，它就是一个圆孔中的方形钉，尽管他很熟练。

Answer 2

您可以通过将高度除以宽度来获得图像宽高比百分比。然后将其用作图像父级的填充，以在父级上创建相同的宽高比形状，并且它自然会匹配图像的宽高比。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img, a {
  text-decoration: none;
  border: none;
}

html, body {
  width: 100%;
  height: auto;
  background-color: #565656;
}

section {
  position: relative;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 1%;
  background-color: #a1a4a8;
}

.container {
  position: relative;
  height: 0;
  padding-top: 56.29510826%;
  position: relative;
}

.level0 img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
}

<section>
Gray: parent

    <div class="level0">
        <div class="container">
            <img src="https://image.ibb.co/kZtbMF/Screen_Shot_2017_03_03_at_3_32_11_PM.png" alt="image">
        </div>
    </div>

</section>

如何将父元素的高度拉伸到包含图像

2 个答案: