我有这个模板,用于在“网格”布局中显示产品:
<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>
然而,这并没有优化,因为 inf 图像 img 大小不一样,它会破坏“网格”布局。如何优化此布局,以便将图像“自动裁剪”到特定的宽度和高度?