如何保持div的特定比例，但给它一个最大尺寸？

Question

我正在尝试保持一个 div 元素的特定比例（比如 1:2），但同时使宽度小于 200px。

目前我已经做到了：

div {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    max-width: 200px;
}

它不能正常工作 - 如果我扩大窗口，宽度停止在200px处扩展，但高度继续增长！

我尝试设置box-sizing: border-box和max-height: 100px，但都不起作用。

我该怎么办？

这是一个样例：http://jsfiddle.net/WVu3s/

- Dori

---

为了在一般情况下保持元素的给定纵横比，我不知道其他解决方案，除了使用JavaScript。 - Denys Séguret

看一下这个链接：https://dev59.com/dmfWa4cB1Zd3GeqPks8_。你走在正确的路上，只是缺少一些实现该方法的元素。`padding-bottom` 读取的是页面高度，而不是其父元素。 - Chad

Answer 1

这是一个基于这个帖子的代码的纯CSS解决方案，但有一些小改动：

HTML

<div class = "box">
    <div class = "content">Ratio 1:2</div>
</div>

CSS

/* Box styles */
.box {
 width: 100%;
 position: relative;
 display: inline-block;
 max-width:200px; /* max width of the box */
}

.box:after {
    padding-top: 50%; /*1:2 ratio*/
    display: block;
    content: '';
}

/* Style that should be applied to the box content */
.content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: green;
}

这里有一个演示：demo

- Alex Guerrero

---

谢谢回复，但这并没有解决我的最大宽度问题...元素的高度将会不断增长...除非我读错了什么。 - Dori

是的，在示例中显示了解决您的max-width问题的方法。无论如何，我已经在原帖中编辑了一个新的解决方案，旧的解决方案可以解决问题，但这个更好。这里有一个演示，可以进行比较。 - Alex Guerrero

Answer 2

在我的情况下，问题是我想根据应用于body标记的css类显示两个不同的图像。 我本可以使用display:none来隐藏其中一个，但这将涉及在只需要一个时加载两个，所以最终我得到了以下内容：

HTML：

<div class='arrow'>
    <img src="/img/arrow.png" style='max-width: 100%;'>
</div>

CSS：

.arrow {
  max-width: 100%;
  overflow: auto;
}

.darktheme .arrow {
  background: url(/img/arrow-darktheme.png) center no-repeat;
}
.darktheme .arrow img {
  opacity: 0;
}

它在暗色主题条件下都加载，但如果没有应用暗色主题，则仅加载一个。

- MalcolmOcean