Css/PHP調整圖像寬度，然後修剪頂部和底部以適合

Question

我有一個動態加載的數據庫中的圖像，這些圖像都是不同的大小，但我想調整它們以獨特的方式。

Please see this example.

我想的圖像，以適應寬度，然後跳閘的頂部和底部的殘餘物，然後在此基礎之上，使整個事情響應。

Answer 1

我可以告訴你你需要什麼，但沒有看到現有的代碼，我不能幫你生成一個實際的解決方案。

基本上，當每個圖像生成時，你應該首先將它包裝在一個div中。

然後，根據圖像的大小以及您可以在桌面所需寬度範圍內適合的數量，我們假設這是1140px。給div你剛剛生成的一類圖像框，然後將該框的樣式設置爲你想要的大小。比方說，你需要橫跨4個盒子，邊界爲3.8％。

現在只需計算所有寬度以找到您的盒子的寬度......您將在4個盒子之間有3個保證金差距，因此3.8％* 3 = 11.4％然後... 100％ - 11.4％= 88.6 ％

這意味着我們有88.6％的寬度我們的4盒之間的分裂...... 88.6％/ 4 = 22.15％

所以，我們給的箱子22.15％的寬度和3.8保證金右％

您必須在每個第4個框上動態生成一個類，或者使用類似:nth-child()的東西來告訴每個第4個框有margin-right: 0;

當然這些框會浮動：左等，以使響應功能，所有的箱子將必須在一個容器。

我們將使用媒體查詢來製作只有2個盒子或僅1個盒子的長方塊的盒子。

至於修剪圖像本身，一旦製作了盒子並且具有設置的大小（px的高度），只需在圖像盒容器上定義overflow: hidden;即可隱藏剩餘部分。