CSS 图像网格填充答案

【问题标题】：CSS Image Grid FilledCSS 图像网格填充
【发布时间】：2012-06-19 00:40:41
【问题描述】：

如果我在 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 来切掉未缩放图像的其余部分。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

为了使其充分发挥作用，我必须创建 .blockWallCell img.portrait .blockWallCell img.landscape 并有条件地知道根据 img 是纵向还是横向应用哪个类。这是我试图避免的。
这两个样式类有什么区别？
最大宽度: 100px;/* 或最大高度:100px;*/
width:100px 无条件地将宽度设置为 100px。 max-width 允许宽度为 0 -> 100 之间的任意大小。您想要包含图像的可变大小的 div 吗？
我在 maxphotoblog.com 上有我的例子，我的目标是创建一个 h100xw100 的正方形。拍摄一张 h300xw400 的图像并从宽度上切掉 100 像素，相反地拍摄一张 h400xw300 的图像并从高度上切掉 100 像素。我现在通过知道图像是横向还是纵向来做到这一点。