Question

我试图将自定义尺寸的图像放入div中，但图像没有在div中对齐。我希望像屏幕截图中的图像一样对齐。请告诉我我错在哪里。< / p>

实际上这是一个测试项目，我已将文件上传到网站。你可以找到它http://estoreproj.xyz/sony.aspx

我希望它看起来像三星页面中的产品一样，这些产品属于下拉类别。

这里是JSFiddle ----＆gt;＆gt;＆gt; https://jsfiddle.net/b160aj5m/

屏幕截图，css和代码位于

之下

.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

Answer 2

将图像放在div中。根据您的要求设置div宽度和高度。然后设置img width：100％，height：auto。

HTML：

ListViewItem

CSS：

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

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

2 个答案: