具有指定尺寸內容的響應式HTML元素

Question

每當瀏覽器寬度足夠寬時，我會嘗試創建響應式HTML元素，它會填充3個水平框元素，其內容可以是文本或圖像。當文本內容不能填滿整個框時，它會留下一些空白空間，以免它包裹在框中。

但是，文本內容可以填充框。無論盒子是否填充，它應具有相同的尺寸，除非瀏覽器尺寸發生變化。

當瀏覽器維度變寬時，3個元素應該保留原始維度。但是，當它變窄時，3個水平元素可以減少到2個水平元素，而將另一個元素留給新的空間。如果瀏覽器空間足夠窄，它可以是1個水平元素。

可以有很多3個水平元素，像這樣：

X X X 
X X X 
X X X 

他們堆疊像一個表。 當內容爲圖片時，其大小必須符合箱子尺寸而非其他方式，因此當原始圖片大於箱子時縮小，或當圖片較小時縮小。

到目前爲止，這是我 my JSFiddle link

上面的代碼有一個負責任的水平框。此外，圖片不符合框，但反之亦然。

請指教。

Answer 1

使用寬度和高度元素將無法獲得響應式設計。

嘗試這些設置爲最小高度/最大高度等。

此外，如果你真的想保持它的響應，那麼你應該只安裝引導框架和使用

COL-MD-4實現這一點更容易，而不必擔心css造型等。