0

「グリッド」レイアウトで製品を表示するために使用する次のテンプレートがあります。

<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サイズが同じではないため、「グリッド」レイアウトが破損するためです。画像を特定の幅と高さに「自動トリミング」するように、このレイアウトを最適化するにはどうすればよいですか。

4

1 に答える 1

0

画像が元の列より大きくならないようにしてください。例：

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

ほとんどの場合、100%代わりに使用することもできます300px

于 2013-03-08T20:28:35.703 に答える