我有一個客戶要求一個非常奇怪的請求（對我）。CSS響應奇怪的佈局
好的，所以我有3張圖片。所有不同的尺寸。他們希望他們在一個包裝好的容器中，高度相等。位於底部的圖像，底部的文字。
現在，這樣做很容易......直到你到達響應部分。
這個網站： http://www.neilcramerphotography.com/
全屏，他們看起來OK（仍在工作與它）。但是，一旦你調整了屏幕大小（我預計會發生這種情況），這個佈局就會變得不可思議。
我只需要擔心前6張圖片，其餘都是設計。
無論我做什麼或使用什麼，都有某種固定數量。就像我必須爲前兩行中的每一行設置一個固定的高度。嘗試填充。感到沮喪，因爲我通常可以解決大多數問題。只是卡住了，如果它不可行。我需要其他人說明。人們從來不相信我，所以:)
我可能不得不嘗試百分比。
我希望人們不明白你在紙上做的一切不能總是很容易地轉換到這樣的事情沒有問題。來自不知道CSS的其他設計師的佈局。
在此先感謝。
加box-sizing: border-box您.woo_category_subs
這是你問的是什麼？
他們對第三方圖書館開放嗎？我個人建議Twitter Bootstrap。這是一個非常強大，可擴展的框架。除了旋轉木馬，導航條，圖形，手風琴和其他一些裝飾品外，它還支持通過基於斷點的網格系統調整響應圖像的大小。我用我的個人website and blog你可以測試與谷歌Chrome瀏覽器的檢查響應（用CTRL + SHIFT + I的任何瀏覽器中訪問）。從我的網站響應圖像的下面是一個例子：
<div class="col-lg-2 col-sm-3 col-xs-4">
<a class="linkPic" href="mailto:[email protected]=Nice%20website!"
title="My Email" target="_top" rel="external">
<img class="img-responsive" src="images/mail.jpg" alt="Email me">
</a>
</div>
神奇發生在類聲明的第一個div標籤。特別是「col-lg-2 col-sm-3 col-xs-4」。什麼這相當於是一個自舉的CSS大小規則縮放圖片臺式機上的1/6屏幕尺寸，四分之一上的片劑，和1/3在智能手機上的一個應用程序（自舉網格是12列寬，LG，SM ，而xs分別爲桌面，平板電腦和智能手機）。
希望這會有所幫助。
請參閱[mcve] –