強制CSS將圖像放入響應式容器中

我在我的網站中有一個響應式圖像網格背景。它的所有工作都可以很好地處理完美的方形圖像，但是當一幅圖像比如1px高度更大時，網格會斷裂。強制CSS將圖像放入響應式容器中

例如：OK：

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

例FAIL

[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%; 
}

進出口使用引導3.是否有可能做到這一點？更多的信息

我想把只平方圖片才能，對不起，沒有電網

編輯。圖像容器是浮動的。這是有問題的截圖：

響應，我需要在要調整完全八方通全屏

來源

2013-11-25 pekpon

使用圖像寬度爲100％。 –

設置固定在HTML中的高度 – Dharman

您可以在這裏找到解決方案： http://stackoverflow.com/questions/23400232/force-bootstrap-responsive-image-to-be-square?answertab=votes#answer- 23518465 –

使用％你可能會需要提供一個高度，甚至設置溢出：隱。如果您想要更好的答案，請提供更多標記。

這是一個div一個鏈接的圖像，而不是一個網格：

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

2013-11-25 11:03:56

有兩兩件事你可以嘗試在這裏可能會回答你的問題。當然，沒有看到你的代碼，很難以更深入的方式提出建議。

如果您使用Boostratp，爲什麼不換圖像的每一行中的row-fluid容器和使用it's grid system？這至少可以確保你不會得到髒的浮動錯誤，儘管這也意味着你會在那個較高的子元素下面獲得一點額外的空間。
或者，設置父錨的高度並設置overflow: hidden。這實際上會切斷較高圖像的底部邊緣，儘管您必須通過您的中斷點進行操作。

如上點兩者的代碼例如：

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

記住，在引導圖像具有max-width: 100%設置爲它們自動所以他們將總是如果足夠寬流到容器的寬度。

2013-11-25 11:06:00 johnkavanagh

嗨！我不能使用網格，因爲我需要粘性圖像和網格有填充或邊距，不要介意，你的答案是一樣的。這個問題沒有解決...... – pekpon

你需要確保錨具有'display：block'設置，並且最大高度是正確的。有了這兩件事，你就不會發現一些圖片比其他圖片更高（它們將被限制在CSS中設置的任何高度）。 – johnkavanagh

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

figure img { 
width: 100%; 
}

2013-11-25 11:17:06

回答