html - CSS 图像网格填充

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 中的图像，而无需将样式设置为 max-width:100px;或 max-height:100px，即如果我不知道它是横向还是纵向图像。我想使用 div 的 overflow:hidden 来切掉非缩放图像的其余部分。

Answer 1

您现在所拥有的应该可以解决问题。您将获得一堆 100x100 的 div，其中的图像将尽可能多地填充 100x100 的空间，并隐藏所有溢出的部分。

您是否希望 .blockWallCell 大小可变，最大为 100x100？或者，如果图像在任一维度上小于 100x100，您是否希望图像拉伸(stretch)以填充单元格？