爲什麼pinterest設置圖像的高度而不是寬度？

我最近一直在研究Pinterest網站的頁面代碼，以便學習CSS中的一些設計技巧。我觀察到的一件事是，他們使用CSS樣式設置每個圖片的高度。這對我來說很奇怪，因爲很明顯，它們都被調整大小以便具有192像素的統一寬度。是否有設置高度而不是寬度的技術原因？爲什麼pinterest設置圖像的高度而不是寬度？

實施例：

<img src="http://media-cache-ec8.pinterest.com/upload/30962316158222159_nQdVRIXP_b.jpg" alt="Summer camp" class="PinImageImg" style="height: 163px;">

來源

2012-06-26 retailevolved

Pinterest使用JQuery石工。 http://masonry.desandro.com/ 現在，如果您嘗試使用磚石來像Pinterest那樣漂浮物體;無論您放大或放大多少物體，都會出現物體無法排列的情況。如果你通過設置對象的寬度來玩耍;你很快就會意識到「Pinterest的192px」背後的數學。在給出合理的填充和邊距之後，您必須爲該佈置的適當功能分配此特定寬度。我已經開發了一個類似於Pinterest的網站，並且花了我們一個多星期的時間來解密「Pinterest的192像素寬度」背後的邏輯。

來源

2012-06-26 04:53:10 xan

+1將我介紹給砌體。儘管如此，我的問題是爲什麼他們設置高度屬性而不是寬度。如果寬度始終爲192，爲什麼每次都要計算適當的高度？似乎沒有必要，但也許石工需要它？ – retailevolved

Pinterest永遠不會計算高度。它只是將圖像保存爲192像素寬度，並且動態地處理高度。如果您碰巧看到Pinterest的CSS代碼;它是： 'element.style {height}：127px; //由砌體計算的動態高度，因此顯示爲** element.style ** } .pin .ImgLink img { max-width：192px; //主要的東西 opacity：1; PS：我不知道我是否能夠正確解釋你。 – xan

出現在您看到高度屬性的HTML代碼是因爲砌體。 – xan

的圖像的「縱橫比」是並不總是最佳的。有時，當您調整到X高度和Y寬度時，根據寬度/高度比，生成的圖像會比預期更寬或更高。如果你在css中設置了一個固定的高度，你要確保它永遠不會比這個大（並且你的設計不會「破」）

來源

2012-06-26 00:29:14

因此，爲什麼不設置固定寬度，因爲所有寬度都完全相同？看起來這將是一個簡單的方法來完成同樣的事情。這只是一個偏好問題嗎？ – retailevolved

我不使用pinterest，但就im而言，我必須對我的圖像做同樣的事情;因爲我不控制它們的寬度或高度。我通常使用最大寬度或最大高度來獲得更好的外觀，並防止圖像破壞我的設計。 –

爲什麼pinterest設置圖像的高度而不是寬度？

回答

相關問題