htmlで多くのimgをオーバーラップ

Question

私は同じ幅と同じ高さを持つ7つの透明な画像を持っています。次に、同じ幅と高さの背景画像も持っています。私がしたこと（やりたいこと）は、メインのdivに背景画像を配置し、下のコードのように他の7つの画像をすべて上に配置することです。しかし結果として、imgは実際にメインディビジョンから流れ出して大きくなります。私は自分のCSSを変更しようとしましたが、同様の動作が起こります。さらに、背景画像はCSSの中で指定されているようにページの中央にはありません。 私の間違いは何ですか？

<div class="row wrapper"> 
     <div class="col container"><img ng-src="{{data.firstDisplay.src}}"></div> 
     <div class="col container"><img ng-src="{{data.secondDisplay.src}}"></div> 
     <div class="col container"><img ng-src="{{data.thirdDisplay.src}}"></div> 
     <div class="col container"><img ng-src="{{data.forthDisplay.src}}"></div> 
     <div class="col container"><img ng-src="{{data.fifthDisplay.src}}"></div> 
     <div class="col container"><img ng-src="{{data.sixthDisplay.src}}"></div> 
     <div class="col container"><img ng-src="{{data.seventhDisplay.src}}"></div> 
    </div> 

そして、次のCSS：

は、だから私は、次のHTMLを得た

img { 
display: inline-block; 
margin-left: auto; 
margin-right: auto; 
padding:0; 
max-width: 100%;} 

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

.wrapper { 
    padding-right:20%; 
    padding-left:20%; 
    width: 300px; 
    height: 127px; 
    background: url(img/Tbackg.png) no-repeat center; 
    background-size: contain; 
    position: relative; 

（背景ではなく、すべての画像がここに表示されることを確認しますが、ポイントが示されているような出力が見えます大きな画像は個々の画像です）：

Answer 1

margin: autoの要素は、幅が、あなたの場合には、余裕をドロップし、親.containerにtext-align: center;を設定する代わりに

img画像の高さがラッパーにセット高さと同じではない場合、あなたはheight: 100%を追加する必要があり、さもなければます彼らはbackgrondイメージの高さが一致しません

img { 
 
    display: inline-block; 
 
    height: 100%;   /* needed if image is higher/lower than 
 
           the 127px set on the wrapper */ 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    text-align: center; 
 
} 
 
.wrapper { 
 
    padding-right: 20%; 
 
    padding-left: 20%; 
 
    width: 300px; 
 
    height: 127px; 
 
    background: yellow url(http://placehold.it/127) no-repeat center; 
 
    background-size: contain; 
 
    position: relative; 
 
}

<div class="row wrapper"> 
 
    <div class="col container"> 
 
    <img src="http://placehold.it/227/f00"> 
 
    </div> 
 
    <div class="col container"> 
 
    <img src="http://placehold.it/227/0f0"> 
 
    </div> 
 
    <div class="col container"> 
 
    <img src="http://placehold.it/227/00f"> 
 
    </div> 
 
</div>

提案がusinの賛成でimgをドロップすることであろうとgコンテナ上の背景画像。そうすることで、画像はbackground-size: contain作品

.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: contain; 
 
} 
 
.wrapper { 
 
    padding-right: 20%; 
 
    padding-left: 20%; 
 
    width: 300px; 
 
    height: 127px; 
 
    background: yellow url(http://placehold.it/127) no-repeat center; 
 
    background-size: contain; 
 
    position: relative; 
 
}

<div class="row wrapper"> 
 
    <div class="col container" 
 
     style="background-image: url(http://placehold.it/127/f00)"> 
 
    </div> 
 
    <div class="col container" 
 
     style="background-image: url(http://placehold.it/127/0f0)"> 
 
    </div> 
 
    <div class="col container" 
 
     style="background-image: url(http://placehold.it/127/00f)"> 
 
    </div> 
 
</div>