7

要素を特定の比率 (たとえば 1:2)に維持しようとしていdivますが、幅を 200px 未満に維持しています。

私がこれまでに持っているもの：

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

うまくいきません - ウィンドウを拡大すると、幅は 200px で拡大しなくなりますが、高さは拡大し続けます!

と を設定しようとしましbox-sizing: border-boxた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 に答える