イメージをスタッキングするCSS

Question

私は互いの上に画像を積み重ねるのが簡単だと知っていますが、これは実現可能かどうかは疑問ですが、 position属性を使用するとすぐに、幅を指定する必要があります。その後、画像はブラウザでサイズ変更されません。

ありがとうございました。

ジョー

Answer 1

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

Answer 2

divのスタックに入れてもいいですか？

Answer 3

position : absoluteとwidth : 100%作品display : block

あなたの問題は、その寸法がヌルですので、あなたが、あなたのdivにだけは絶対positionned IMGを持っている可能性がある場合（位置決めルールので。）これを解決する

双方向：

• make imgは絶対配置されていません。その寸法は親divの寸法になります

• position : relativeと実際の画像と同じ寸法の透明な画像を使用してください：それはかなり汚れていますが、親のdivの寸法を設定します。

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

Answer 4

写真はこの

.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>