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

Question

有件事折磨了我很久。我只是找不到任何方法让图像适合它的 parent 高度。

我在这里遇到了很多问题，但是 none 给了我我需要的答案。

其中一些问题是：

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?

现在，问题是每当我将图像插入到 parent 元素时，parent 就不会拉伸高度。

一张图片：

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

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

红色边框应环绕图像，parent 应环绕整个图像加上填充。

一些代码：

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、% 等。唯一实际有效的方法是为 parent 元素设置固定高度，但这对我不利。我希望 parent 根据图像的宽度自动拉伸它的高度。

哦，还有一件事。我阅读了几个 JQuery、JS 或类似的答案，但我希望得到纯粹的 CSS 答案。显然 trere 一定是我遗漏的东西。

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

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>

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

How to strech parent element's height to containing image

css

height

parent