如何实现Pinterest等动态图像高度？

Question

我正在尝试获得类似于Pinterst的布局。到目前为止，我有像在125px和400px之间的PHP中随机生成的图像。

这并没有产生类似Pinterest的效果，正确的宽高比似乎是动态的。有谁知道Pinterest如何动态生成图像的高度？

<div class="pin_image">

          <a href="<?php the_permalink(); ?>"><img width="191" height="auto" class="<?php echo $img_class; ?>" 
            src="<?php echo PricerrTheme_get_first_post_image(get_the_ID(),102,72); ?>" /></a>
            </div>    

Answer 1

它们将图像宽度基于列宽。因此，例如，如果它们的列宽为200px，而原始图像的高度为600px，宽度为400px，则会将图像缩放一半以使其适合列宽。所以600px * 0.5 = 300px高度，400px * 0.5 = 200px宽度。通过将两个维度乘以相同的百分比，可以保持纵横比。

Answer 2

您需要Isotope或Masonry

之类的内容

它不会改变图像高度，但会以愉快的方式重新排列布局。

Answer 3

调整图像大小时，需要根据图像的宽度进行调整。你想要的是一个修复和弹出高度。 例如，如果你有一个1000乘2000的图像，如果你的列是100px，你需要将它的大小调整为100乘200.（即计算宽度的比例并将其应用于高度）

Answer 4

您只需将标签上的宽度设置为列宽。将保留图像的纵横比，并相应地设置高度。