如何将父元素的高度拉伸到容器图像

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

我尝试过溢出：隐藏、最大高度、% 等。唯一真正有效的方法是为父元素设置固定高度，但这对我不利。我希望父母根据图像的宽度自动拉伸它的高度。

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

如果有任何令人困惑的地方，请告诉我。感谢您的帮助！

Answer 1

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

* {
  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>

Answer 2

我认为没有办法动态适应绝对定位的图像。您必须为容器设置一个比图像大的高度。

编辑：@Michael Coker 证明有办法做到这一点，但如果你问我，这是一个圆孔中的方钉，虽然他很熟练。