Question

如果我在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中的图像而不设置最大宽度的样式：100px;或最大高度：100px，即如果我不知道它是横向还是纵向图像。我想使用溢出：div的隐藏来切割未缩放图像的其余部分。

Answer 1

你现在所做的应该是诀窍。您将获得一堆100x100 div，其中的图像将尽可能多地填充100x100空间，并隐藏任何溢出的部分。

你想.blockWallCell是可变大小，最大值是100x100吗？或者，如果图像在任一维度上小于100x100，您是否希望图像伸展以填充单元格？

CSS图像网格填充

1 个答案: