電網布局自動裁剪圖像

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> 

然而，這不是最佳的，因爲INF圖片IMG的大小是不一樣的它會打破「網格」佈局。如何優化這種佈局，以便將圖像自動裁剪爲特定的寬度和高度？

Answer 1

確保您的圖片沒有得到比他們在更大的cols，例如：

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

最可能的是，你還可以使用100%代替300px