CSS圖像網格填充

如果我在CSS的圖像柵格：CSS圖像網格填充

<div class="blockWall"> 
    <div class="blockWallCell"> 
     <a href="#"> 
     <img src="img.gif" /> 
     </a> 
    </div>

... blockWallCell重複

<div style="clear:both;"></div> 
</div>

與CSS：

.blockWall 
{ 
    width:800px; 
} 

.blockWallCell 
{ 
    float: left; 
    height: 100px; 
    overflow: hidden; 
    width: 100px; 
    padding:4px; 
} 
.blockWallCell img 
{ 
    border:none; 
     max-width: 100px;/* or max-height:100px;*/ 
    overflow: hidden; 
    vertical-align: middle; 
}

有沒有辦法通過css使標籤完全適合100x100 .blockWallCell中的圖像，而不將其設置爲max-width：100px;或max-height：100px，即如果我不知道它是否是風景或肖像圖像。我想使用overflow：隱藏div的非縮放圖像的其餘部分。

來源

2011-01-14 maxfridbe

你現在應該做的伎倆。您將獲得一堆100x100的div，其圖像將盡可能多地填充100x100空間，並隱藏任何溢出的部分。

是否要.blockWallCell爲可變大小，最大值爲100x100？或者，如果圖像在任何一個維度都小於100x100，您是否希望圖像伸展以填充單元格？

來源

2011-01-14 04:06:16

爲了這個工作充分，我必須創建 .blockWallCell img.portrait .blockWallCell img.landscape 和有條件地知道申請如果根據portraid或景觀的IMG的類。這是我想要避免的。 – maxfridbe 2011-01-14 04:11:47

CSS圖像網格填充

回答

相關問題