同じサイズの画像を重ねて表示しています。このため、イメージの位置を絶対に設定しましたが、この方法では、イメージが絶対配置されているため、コンテナのサイズが正しくないことが問題になります...CSSを使用してサイズ変更可能な画像を重ねて表示
さらに、ブラウザのサイズ
一部の画像を挿入するための解決方法が分かっていますか？
<html>
<head></head>
<body>
<div id="container">
<img src="image1" />
<img src="image2" />
<img src="image3" />
</div>
</body>
</html>
のdivコンテナが3 IMGのサイズを取得する必要があり、すべてのimgは
トリックがためにそれらを1つだけ設定することです...同じサイズを有し、そして互いをオーバーレイする必要がありますあなたが順序を再配置しても、サイズを設定します
#container img:first-of-type {
position:relative;
}
のような相対的な画像を、何かを使用することにより、相対、絶対のものはちょうど上に（または後ろの）横たわっています。
画像のサイズがわかっている場合は、それに応じてmin-heightとmin-widthを#containerと設定し、それにposition:relativeと指定してください。
あなたのイメージが動的であり、任意のサイズを持つことができる場合は、これはJavaScriptをせずに実行（またはクライアント・サイドのDOM要素の操作の他のフォーム）することはできません。イメージ（またはページ）がロードされたら、コンテナのmin-heightとmin-widthを必要な値に設定します。応答性を保つためには、文書resizeとloadイベントで親のmin-heightとmin-widthを動的に変更する関数をバインドする必要があります。 jQueryのを使用して概念の
証明、：
$(document).on('load,resize', `#container`, function() {
var firstImage = $(this).find(`img`).eq(0);
$(this).css({'min-height':firstImage.height(), 'min-width':firstImage.width()});
})<div id="container">
<img src="image1" />
<img src="image2" />
<img src="image3" />
</div>注：あなたは一人でこのスクリプトのプロジェクトでのjQueryを読み込むべきではありません。まだロードしていない場合は、JavaScriptまたはTypeScriptで記述することもできます。
また、応答性のために、あなたはあなたのイメージに、このCSSを適用する必要があります。
#container>img {
max-width: 100%;
height: auto;
display:block;
}
私はbackground-image CSSプロパティで設定した複数の画像のために行くと思います。
CSS：
#container {
background-image: url('image1'), url('image2'), url('image3');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/*background-size: cover; - alternatively, see the explanation below */
}
HTML：
<body>
<div id="container"></div>
</body>
background-size: cover|contain;を使用するには、画像が正しく常に#containerの実際の寸法に合わせて、ブラウザによってスケーリングされることを保証します。
background-size: cover;はどのように動作しますか？
バックグラウンド領域ができるだけ大きく、バックグラウンド領域がバックグラウンドイメージで完全に覆われるようにスケーリングします。背景画像の一部は、背景の位置決め領域内で視野に入っていない可能性があります。
background-size: contain;はどのように動作しますか？
参照/さらに読み取り内部よう適合できること
スケール
- background-size property
JavaScriptスクリプトが好きですか？ – repzero
この場合、私はいくつかのjavascriptスクリプトを使用することを避けるでしょう。その瞬間にいくつかの他のjavascritコードが実行されているからです – davidinho