0

問題のページは基本的に画像のグリッドであり、ウィンドウのサイズに関係なく常に 3 枚です。

画像はWordpressの投稿から来ており、それぞれにoverflow:hiddenを持つ独自のコンテナdivがあります. コンテナの div は CSS で幅 33.33% に設定されています。ready() で jQuery を使用し、ウィンドウのサイズを変更して、コンテナーの div の高さを幅に等しく設定しています。

html/php 構造は次のようになります。

<div class="collectionPostContainer">
                    <div class="collectionImageHolder">
                        <img src='<?php the_field('photo'); ?>'/>
                    </div>
</div>

js 関数は次のようになります。

  function resizeEntryHeight(){
windowWidth = $(window).width();
$('.collectionPostContainer').each(function(){
    $(this).css('height',$(this).width()+'');
});

}

問題は、ページが最初に読み込まれるときに、最初の 4 つのエントリのそれぞれに後続のエントリよりもわずかに高い高さが割り当てられ、3 行目のグリッドから外れることです。コンソールまたはウィンドウのサイズ変更で関数を再度呼び出すとすぐに、高さが固定され、すべて等しくなります。

複数の開始ウィンドウ サイズで、Firefox と Chrome でテストされています。奇妙なことに、最初の 4 つのエントリの高さは常に、後のエントリよりも正確に 5 ピクセル高くなります。

だから、表向きは同じ幅の要素が同じループ内で異なる高さに割り当てられている理由と、きれいな画像グリッドを作成する方法を考えています。

これが明確であることを願っています！

ありがとう。

4

2 に答える 2

0

このjqueryプラグインを使用できます：https ：//github.com/karacas/imgLiquid

于 2013-01-02T18:02:40.417 に答える
0

これはあなたのために働く必要があります

var resizeEntryHeight=function(){
$('.collectionPostContainer').each(function(){
    $(this).css('height',$(this).width()+'px');
});
}

$(document).ready(function(){
resizeEntryHeight();
$(window).resize(resizeEntryHeight());
});
于 2013-01-02T19:16:35.770 に答える