7

我试图让一个div元素保持特定的比例（比如 1:2），但保持宽度小于 200 像素。

到目前为止我得到了什么：

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

它不起作用 - 如果我扩大窗口，宽度会在 200 像素处停止扩大，但高度会不断增长！

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

我应该怎么办？

这是一个小提琴：http: //jsfiddle.net/WVu3s/

4

2 回答 2

3

这是一个基于这篇文章的代码的纯 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;
}

这是一个演示

于 2013-11-12T15:54:36.017 回答
0

在我的情况下，问题是我想根据应用于 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;
}

它在黑暗主题条件下加载，但如果不应用黑暗主题，则仅加载一个。

于 2019-01-08T19:16:03.797 回答