如何实现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

您只需要将标记上的宽度设置为列宽度的宽度即可。 将保持图像的纵横比，并相应地设置高度。