1

コンテンツに 4 つの色付きブロックを配置したいと考えていますdiv。各ブロックは、コンテナーの幅の 50%、高さの 50% である必要があります。上部に 2 つ、下部に 2 つです。

ブラウザのサイズを変更するときは、それに合わせてサイズを変更する必要があります。

高さと幅が 50%の 4 つのdiv要素を作成しようとしました。また、高さと幅が 50% の 4 つの画像を配置しようとしました。

後者は機能しているように見えますが、アスペクト比を維持しながらスケーリングしますが、コンテンツ div を埋めるためにそれらを引き延ばしたいと考えています。

4

1 に答える 1

1

編集：

間違いなくもっとエレガントな方法がありますが、これはうまくいくでしょう:

<html><body>
<div style="position:absolute; left:0; top:0; width:50%; height:50%; background-color:blue">A</div>
<div style="position:absolute; left:50%; top:0; width:50%; height:50%; background-color:green">B</div>
<div style="position:absolute; left:0; top:50%; width:50%; height:50%; background-color:yellow">C</div>
<div style="position:absolute; left:50%; top:50%; width:50%; height:50%; background-color:red">D</div>
</body></html>

オリジナル：

画像をコンテンツ全体に引き伸ばしたい場合、ウィンドウ サイズが変わると縦横比が変化することは避けられません。

あなたが実際に望んでいるのは、ブロックを同じ縦横比に保ちながら、必要に応じて下部または側面に余分なスペースを残して、ウィンドウ内でできるだけ大きくすることです。

この質問を見てください。必要な縦横比で 1 つの div を設定し、内部で 4 つの部分に分割できます。

于 2013-03-21T16:15:45.787 に答える