4

高さが変更されたときに縦横比で幅がスケーリングされ、常にブラウザーの高さの 100% であるサイトが必要です。

新しい vh ユニットを使用してこれを実現できます: http://jsbin.com/AmAZaDA/3 (ブラウザの高さのサイズ変更)

<body>
    <div></div>
</body>

 

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

div {
    height: 100%;
    width: 130vh;
    margin: 0 auto;
    background: #f0f;
}

ただし、このユニットはサポートされていないため、IE8 と Safari のフォールバックが心配です。

この効果を実現するCSS のみの方法は他にありますか?

4

3 に答える 3

-1

相対的なパディング (高さ方向であっても) は要素の幅に基づいているため、親アイテムのパディングを使用してそれを行うことができます。

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
 }

img {
    width: 100%;
    height: 100%;
    position: absolute;
   left: 0;
 }
于 2013-10-03T11:13:25.283 に答える