为什么pinterest设置图像的高度而不是宽度?

ret*_*ved 1 css layout

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

例:

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

xan*_*xan 5

Pinterest使用JQuery砌体.http://masonry.desandro.com/ 现在,如果你像Pinterest那样尝试使用砌体浮动物体; 无论您放大或缩放多少,都会出现无法排列物体的情况.如果你通过设置对象的宽度来玩游戏; 你很快就会意识到"Pinterest的192px"背后的数学.在给出合理的填充和边距之后,您必须为该布置的正确功能指定此特定宽度.我一直在开发一个类似于Pinterest的网站,我们用了一个多星期来解密"Pinterest的192px宽度"背后的逻辑

  • Pinterest从不计算高度.它只是将图像保存在192px宽度中,并且动态地处理高度.如果你碰巧看到Pinterest的CSS代码; 它是:`element.style {height:127px; //由Masonry计算的动态高度,因此显示为**element.style**} .pin .ImgLink img {max-width:192px; //主要不透明度:1; } PS:我不知道我是否能够正确地解释你. (2认同)