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图像网格填充

回答

相关问题