Html 在图像大小不同的div中拟合图像

我正在尝试将自定义大小的图像放入div中，但是图像在div中没有对齐。我希望对齐方式与屏幕截图1中的图像相同。请告诉我哪里错了

这是一个测试项目，实际上，我已经将文件上传到了网站。你可以找到它@

我想让它看起来像三星页面上的产品一样，该页面属于下拉式分类

这是JSFIDLE-->>>

下面是屏幕截图、css和代码

截图：

HTML代码：

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

$123

购买

不要对图像应用明确的宽度或高度。相反，给它：

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

---

如果要指定宽度，请设置

height:auto

在分区内拍摄图像。根据需要设置分区宽度和高度。然后设置img宽度：100%，高度：自动

HTML:

---

您能否创建一个只包含2-3个映像的JSFIDLE，以便我们可以尝试用代码修复现有问题？一个解决方案：

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

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

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

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