0

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

这并没有产生类似 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>
4

4 回答 4

1

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

于 2012-10-19T03:49:36.147 回答
1

你需要同位素或砌体之类的东西

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

于 2012-10-19T03:49:54.177 回答
0

当您调整图像大小时，您需要根据图像的宽度来执行此操作。因为你想要的是一个固定的高度和一个流行的高度。例如，如果您有一个 1000 x 2000 的图像，如果您的列是 100 像素，则需要将其大小调整为 100 x 200。（即计算宽度的比率并将其应用于高度）

于 2012-10-19T04:11:34.327 回答
0

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

于 2012-10-19T14:50:12.207 回答