html - 将图像放入图像大小不同的 div 中

Question

我正在尝试将自定义尺寸的图像放入 div 中，但图像在 div 中没有对齐。我想要像屏幕截图 1 中的图像那样对齐。请告诉我哪里错了。

这实际上是一个测试元素，我已经将文件上传到站点。您可以在@http://estoreproj.xyz/sony.aspx 找到它。

我希望它看起来像三星页面中的产品一样排列在下拉列表的类别下。

这是 JSFiddle ---->>> https://jsfiddle.net/b160aj5m/

截图、css和代码如下

截图: 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代码:

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

如果你想指定宽度，那么设置height: auto