强制CSS在响应容器中对图像进行方形化

Question

我的网站上有响应式图像网格背景。 它的所有工作都很好，具有完美的方形图像，但是当一个图像例如1px高度更大时，网格会断开。

示例OK：

[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，这是我的代码：

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来完全调整全屏

Answer 1

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

• 如果您正在使用Boostratp，为什么不将每行图像包装在row-fluid容器中并使用it's grid system？这至少可以确保你不会得到脏漂浮虫，虽然这也意味着你会在那个较高的子元素下面获得一些额外的空间。
• 或者，设置父锚点的高度并设置overflow: hidden。这将基本上切断较高图像的底边，尽管你必须通过你的断点。

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

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

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

Answer 2

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

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

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

Answer 3

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

figure img {
width: 100%;
}