0

画像を簡単に重ねることができることは知っていますが、流動的な画像を維持しながらこれを達成できるかどうか疑問に思いましたか? position 属性を使用するとすぐに、幅を指定する必要があります。その後、画像はブラウザでサイズ変更されません。

助けてくれてありがとう。

ジョー

4

3 に答える 3

1

空<img>または<div>このようなもので写真を背景にします

.container {
  position: relative;
  height: 400px;
  width: 100%;
}

.container > div {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

<div class="container">

   <div style="background: url('myimage1.jpg');"><!-- nothing --></div>
   <div style="background: url('myimage2.jpg');"><!-- nothing --></div>
   <div style="background: url('myimage3.jpg');"><!-- nothing --></div>

</div>
于 2012-04-25T12:44:30.020 に答える
1

もちろん使用できますwidth: 100%;。display: block;また、 img 要素で指定するだけであれば、div 内に配置する必要はありません。を指定する必要がある場合がありますmax-widthが、それは特定のアプリケーションと必要なブラウザー サポートによって異なります。

于 2012-04-25T12:31:06.210 に答える
1

Aはifwidth : 100%で動作しますposition : absolutedisplay : block

あなたの問題は、div に img を絶対的に配置しただけである可能性が高いため、その寸法は null です (配置規則のため)。

これを解決する2つの方法：

  • 絶対に配置されていない 1 つの画像を作成します。その寸法は親divの寸法になります

  • position : relativeで、実際の imgs と同じサイズの透明な img を使用します。かなり汚れていますが、親 div のサイズを設定します。

これらは、imgs のサイズが同じ場合にのみ機能します。それ以外の場合は、JS ソリューションを使用する必要があります。

于 2012-04-25T12:34:46.800 に答える