5

要素の幅と高さをパーセンテージで設定して、大きな画面では少し大きく、通常の画面では普通に見えるようにしました。また、小さすぎる画面で表示したときにレイアウトが歪まないように設定min-heightしました。min-width要素の 1 つを正方形として表示したいのですが、それを実現するための CSS のみのソリューションを思いつくことができません。

これが私が試したものです: http://jsfiddle.net/5VTTD/、しかしうまくいきませんでした。

これは機能します: http://jsfiddle.net/5VTTD/1/ですが、JS を使用します。

4

2 に答える 2

7

<div>コンテナとしての外部と、正方形としての内部が必要になります。

<div>正方形に 50% の寸法を使用しましたが、必要なサイズを使用できます。これは、親コンテナーに対して相対的になります。

また、それを強調するために黒の背景色を指定しました。ここにDEMOがあります。

トリックはすべてpadding-bottom: 100%親の中にあり<div>ます。

CSS:

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#square {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #000000;
}

HTML:

<div id="container">
  <div id="square">
  </div>
</div>
于 2012-10-08T12:34:36.367 に答える
0

これを見てください：http://jsfiddle.net/5VTTD/9/

于 2012-10-08T12:28:47.857 に答える