强制 CSS 在响应式容器中调整图像答案

【问题标题】：Force CSS to square image in a responsive container强制 CSS 在响应式容器中调整图像
【发布时间】：2013-12-10 00:33:26
【问题描述】：

我的网站中有一个响应式图像网格背景。对于完美的方形图像，它的所有功能都可以正常工作，但是当一个图像的高度例如大 1px 时，网格会中断。

示例确定：

[H][H][H][H][H][H]  
[H][H][H][H][H][H]  
[H][H][H][H][H][H]

失败示例

[H][H][H][H][H][H]  
[H][H][H][A][H][H]  
            [H][H]  
[H][H][H][H][H][H]

我不想使用 mansory o 其他插件，这是我的代码：

HTML

<div class="resp pull-left">  
<a href="#"><img class="img-responsive indexUser" src="image.jpg"></a>  
</div>

CSS

.resp{
    width:10%;
    height:10%;
}
.resp img{
    width:100%;
}

我正在使用 Bootstrap 3。可以做到吗？

编辑更多信息

我只想整理方形图片，抱歉，没有网格。图像容器是浮动的。这是有问题的截图：

反应灵敏，我需要使用 % in with 来完美调整全屏

【问题讨论】：

【解决方案1】：

您可能需要提供高度，甚至可能需要设置溢出：隐藏。如果您想要更好的答案，请提供更多标记。

这是一个 div 中的链接图像，而不是网格：

<div class="resp pull-left">  
    <a href="#"><img class="img-responsive indexUser" src="image.jpg"></a>  
</div>

【讨论】：

【解决方案2】：

您可以在这里尝试两件事来回答您的问题。当然，如果没有看到您的代码，很难以更深入的方式提出建议。

如果您使用的是 Boostratp，为什么不将每一行图像包装在 row-fluid 容器中并使用 it's grid system？这至少可以确保您不会遇到肮脏的浮动错误，尽管这也意味着您将在更高的子元素下方获得一些额外的空间。
或者，设置父锚点的高度并设置overflow: hidden。这实际上会切断较高图像的底部边缘，尽管您必须处理断点。

作为上面第二点的代码示例：

.resp a{
    display: block;
    max-height: 300px;
    overflow: hidden;
}

请记住，Bootstrap 中的图像已自动设置为 max-width: 100%，因此如果足够宽，它们将始终流动到容器的宽度。

【讨论】：

【解决方案3】：

<figure><img src="images/edu.jpg"></figure>

figure img {
width: 100%;
}

【讨论】：