がどのように私は完全なdiv要素に画像を表示しようとする

Question

のhtml CSSのフルdiv要素に画像を表示するが、それはdiv要素の中央のみを表示 私は次のコードを使用してい 私のhtmlコードは

.all-stores .store-logo { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border: 1px solid red 
 
    }

<div class="white-block all-stores"> 
 
\t <div class="embed-responsive embed-responsive-4by3"> 
 
\t \t <div class="store-logo"> 
 
\t \t \t <a href="test"> 
 
\t \t \t \t <img src="http://via.placeholder.com/350x350" class="img-responsive wp-post-image"> 
 
\t \t \t </a> 
 
\t \t </div> 
 
\t </div> 
 
</div>

です

おかげ

Answer 1

あなたはこのような何かをしたい： -

.img{ 
 
width:100%; 
 

 
}

<div class="white-block all-stores"> 
 
<div class="embed-responsive embed-responsive-4by3"> 
 
    <div class="store-logo"> 
 
     <a href="test"> 
 
      <img src="http://images.clipartpanda.com/nest-clip-art-nest.jpg" class="img"> 
 
     </a> 
 
    </div> 
 
</div>

Answer 2

このCSSスタイルを追加

img 
{ 
margin: auto; 
position: absolute; 
left: 0; 
right: 0; 
bottom: 0; 
} 

Answer 3

このCSSを追加します：https://jsfiddle.net/cq8v0rjr/

それは（その親を記入します）100％にインラインブロック要素を設定します。

.store-logo > a, .store-logo > a > img { 
    display: inline-block; 
    width: 100%; 
}