画像のサイズが変化するdivに画像を合わせる

Question

divにカスタムサイズの画像を収めようとしているが、div.I内の画像が整列していない。画像のような位置合わせがスクリーンショット1に欲しい。私は間違っている。

これテストプロジェクトは、実際に、私は。あなたがhttp://estoreproj.xyz/sony.aspx

@私はそれがドロップダウンなどのカテゴリの下にあるサムスンのページで製品のようにalligned見たくて見つけることができるサイトにファイルをアップロードしています。 screenshot1 screenshot2

.product{ 
display: block; 
float:left; 
margin: 1% 0 1% 1%; 

} 



.productgrid img{ 

    max-width:100%; 
    display:block; 
    padding-bottom: 8px; 
    margin: 0 auto; 
} 

HTMLコード：

はこちら---- >>>https://jsfiddle.net/b160aj5m/

スクリーンショット、CSSとコードが

スクリーンショットの下にあるJSFiddleです

<div class="productgrid"> 
       <img src="phonepics/sony/z5.jpg" > 
        <a href="single.html">Sony Xperia Z5 </a> 
       <h3>$123</h3> 
       <ul> 
        <button class="button"><span>Buy </span></button> 
       </ul> 
      </div> 
     </div> 

Answer 1

画像に明示的な幅や高さを適用しないでください。

max-width:100%; 
max-height:100%; 

を、あなたが幅を指定したい場合は、その後のdiv内の画像を撮る height: auto

Answer 2

を設定します。代わりに、それを与えます。 divの幅と高さを要件として設定します。次に、img width：100％、height：autoを設定します。

HTML：

<div class="productgrid"> 
     <div class="img-container"> 
      <img src="phonepics/sony/z5.jpg" > 
     </div> 
       <a href="single.html">Sony Xperia Z5 </a> 
      <h3>$123</h3> 
      <ul> 
       <button class="button"><span>Buy </span></button> 
      </ul> 
     </div> 
    </div> 

CSS：

.img-container { 
    width: 16px; 
    height: 20px; 
    margin: 0 auto; 
} 

.productgrid img{ 
    width: 100%; 
    height: auto; 
}