0

ブラウザ ウィンドウのサイズが変更されたときに、div の縦横比を維持する必要があります。

私はこれについてかなりの検索を行いました。画面の幅が変更されるたびに、パディングを使用して、div の高さを幅に対して相対的にすることで、div のアスペクト比を維持することができます。

この手法は、Stack Overflow でここに示されています。特に、このリンクされた例では、実際の手法が示されています。

しかし、私は反対のことをする必要があります。高さを div の幅に対して相対的にするのではなく、ブラウザー ウィンドウの高さが変更されるたびに div の幅を変更する必要があります。これを行う必要があるのは、コンテンツを相対的に流したい背景画像があり、その背景画像の高さが 100% で、縦横比が保持されているためです。

リンクされた方法を使用してみましたが、水平属性を垂直属性に交換しました。機能していません。理由がわかりません。おそらく誰かがこれを行う方法を示すことができます。

4

2 に答える 2

1

ブラウザ ウィンドウの高さが変更されるたびに、div の幅を変更する必要があります。

calc()それに対する純粋な CSS ソリューションについては、いずれかまたはvhユニットのより広範な実装を待つ必要があります。

于 2013-04-27T23:50:55.197 に答える
0

これが純粋なCSSで可能かどうかはわかりませんが、jQueryで可能な方法があります。このディスカッションを参照してください

たぶん、mmoustafa のようなものが提案しました:

$(window).resize(function() {
    $('#my-div').css('width', window.innerHeight*0.4+'px');
    $('#my-div').css('height', window.innerHeight*0.2+'px');
});
于 2013-04-27T23:44:07.413 に答える