1

最近一直在研究 Pinterest 网站的页面代码，学习一些 CSS 的设计技巧。我观察到的一件事是他们使用 CSS 样式设置每个图像的高度。这对我来说很奇怪，因为很明显它们都在调整大小以便具​​有 192 像素的统一宽度。设置高度而不是宽度是否有技术原因？

例子：

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

2 回答 2

5

Pinterest 使用 JQuery 砌体。http://masonry.desandro.com/ 现在，如果您尝试像 Pinterest 那样使用砖石来漂浮物体；无论您放大多少或放大多少，您的对象都不会排列。如果您通过设置对象的宽度来玩耍；您很快就会意识到“Pinterest 的 192px”背后的数学原理。在给出合理的填充和边距后，您必须为安排的正确功能分配这个特定的宽度。我在开发一个类似于 Pinterest 的网站，我们花了一个多星期的时间来解密“Pinterest 的 192px 宽度”背后的逻辑

于 2012-06-26T04:53:10.297 回答
0

图像的“纵横比”并不总是最佳的。有时，当您调整到 X 高度和 Y 宽度时，生成的图像会比预期更宽或更高，具体取决于宽度/高度比。如果你在 css 中设置一个固定的高度，你确保它永远不会大于那个（并且你的设计不会“破坏”）

于 2012-06-26T00:29:14.543 回答