Question

我有这个模板用于以“网格”布局显示产品：

<div id="cols3-top"></div>
<div id="cols3" class="box" data-field="products">
    <div data-field="product" class="col">
    <h3><a href="#" data-field="title">Sample Product</a></h3>
        <p class="nom t-center"><a href="#"><img src="tmp/200x140.gif" alt="" data-field="imageurl"/></a></p>
    <div class="col-text">
        <p data-field="content">Product information</p> 
        <ul data-field="features" class="ul-01"></ul>
    </div> <!-- /col-text -->
    <div class="col-more"><a href="#">
            <img src="design/cols3-more.gif" alt="" data-field="morebutton"/></a>
        </div>
    </div>              
</div> <!-- /cols3 -->
<div id="cols3-bottom"></div>

然而，这并未进行优化，因为图像img大小不一样会破坏“网格”布局。如何优化此布局，以便将图像“自动裁剪”到特定的宽度和高度？

Answer 1

确保您的图像不会比它们所在的cols大。例如：

#cols3 img{
    width:300px; /* width of #cols3 */
    height:auto;
}

您很可能也可以使用100%代替300px

自动裁剪图像以进行网格布局

1 个答案: