容器填充图像宽高比

Question

我试图做一个共同的伎俩，但我显然做错了，因为我没有达到预期的结果。我尝试使用图像的宽高比填充容器，因此应使容器与图像的高度相同。

我在网上看到要获得图像的比例，你必须这样做：

height / width * 100

HTML

<div class="box">
  <img src="..." width="100" height="150" />
</div>

CSS

.box {
  padding-bottom: 150%;
  position: relative;
  background: red;
  width: 100px;
}

.box img {
  position: absolute;
  max-width: 100%;
  opacity: 0.8;
  height: auto;
  width: 100%;
  left: 0;
  top: 0;
}

Here's a fiddle展示了我所做的一切。

任何人都知道我在这里做错了吗？

Answer 1

您的盒子需要一个容器，因为padding-bottom:150%是父元素的150％：

＆＃13;

＆＃13;

.container {
  width: 100%;
  max-width: 100px;
}

.box {
  padding-bottom: 150%;
  position: relative;
  background: red;
  width: 100%;
}

.box img {
  position: absolute;
  max-width: 100%;
  opacity: 0.8;
  height: auto;
  width: 100%;
  left: 0;
  top: 0;
}

＆＃13;

<div class="container">
  <div class="box">
    <img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=100%C3%97150&w=100&h=150" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;