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

画像の幅は列の幅に基づいています。たとえば、列の幅が 200 ピクセルで、元の画像が高さ 600 ピクセル、幅 400 ピクセルの場合、列の幅に合わせて画像を半分にスケ​​ーリングします。したがって、600px * 0.5 = 300px の高さ、400px * 0.5 = 200px の幅です。両方の寸法に同じパーセントを掛けると、縦横比が維持されます。

于 2012-10-19T03:49:36.147 に答える
1

IsotopeやMasonryのようなものが必要です

画像の高さは変わりませんが、レイアウトを快適に並べ替えます。

于 2012-10-19T03:49:54.177 に答える
0

画像のサイズを変更するときは、画像の幅に基づいてサイズを変更する必要があります。あなたが望むのは、修正と人口の多い高さです。たとえば、画像が1000 x 2000で、列が100pxの場合、画像のサイズを100 x 200に変更する必要があります（つまり、幅の比率を計算し、同じものを高さに適用します）

于 2012-10-19T04:11:34.327 に答える
0

タグの幅を列の幅に設定するだけです。画像の縦横比が維持され、それに応じて高さが設定されます。

于 2012-10-19T14:50:12.207 に答える