1

リンクである特定の領域を持つ画像で構成される Web サイトを作成しています。縦横比を維持するために、画像をwidth: 100%、および にしたい。heightauto

リンクにしたい画像内のすべての場所もスケーリングされるため、スケーリング可能な領域を作成するために、パーセンテージ マージンを使用して div を作成することを考えていました。これは、divの幅に対して機能しています。

問題はheight 、要素からの要素がうまく制御されておらず、設定した高さを尊重していないように見えることです。

これを機能させる方法、またはこれを達成するためのより良い方法についての提案を誰かが持っていますか?

ありがとう！

4

1 に答える 1

0

私が考えることができるいくつかの方法があります。追加のマークアップを必要としないposition: relativeのは、#bigbox. 次に、高さの値ではなく、上下の値を使用して小さなボックスを絶対に配置できます。

CSS:

img{
  width: 100%;
  z-index: -1;    
}

div#bigbox {
  width: 100%;
  margin: 0 auto;
  margin-left: 0;
  position: relative;
}

div#smallbox1 {
  left: 11%;
  top: 20%;
  width: 20%;
  bottom: 23%;
  position:absolute;
  background-color: red;  
}

div#smallbox2 {
  margin-left: 40%;
  top: 20%;
  width:20%;
  bottom: 23%;
  position: absolute;
  background-color: green;
}

ここで jsbin を更新します: jsbin.com/oqojef/2/edit

于 2013-05-06T03:25:36.533 に答える