[注: 現在、画像を投稿するほどの評判がないため、残念ながらリンクとして投稿されています]
さて、私は現在、jQuery Masonry プラグインの助けを借りて、Wordpress のテーマを開発しています。表示しているページに応じて、投稿内の画像の幅は 200 ピクセルまたは 500 ピクセルにする必要があります。以前、幅が変更されたときに画像のアスペクト比が保持されないという問題に遭遇しました。この問題は、いくつかの単純な CSS で修正しました。
#post img {
width:100%;
height:100%;
}
それはうまくいくように見えました。しかし、現在、ページ上の画像に非常に奇妙なことが起こっており、ページの読み込み時に画像が不均衡に引き伸ばされています (画像はスクリーンショットのほぼ 2 倍に伸びています)。
http://i.stack.imgur.com/5dAgU.jpg
奇妙なことに、最初の高さの違いに関係なく、すべての画像が同じ長さに伸びます。
ページを更新すると、画像が正しい縦横比に戻ります。ページは次のようになります。
http://i.stack.imgur.com/YK4Sl.jpg
問題を jQuery Masonry プラグインに特定しました。それを取り除くと、画像は問題なくレンダリングされます。それ以上に、何が起こっているのか、どうすれば修正できるのかまったくわかりません。
参考までに: ページのサイズを変更すると、プラグインは通常どおりレンガをシャッフルしますが、画像はさらに伸びます。ひょっとしたら何か意味があるのかも？
私はどこでも無駄に答えを探しました。たぶん、あなたの元気な若者たちは、何が問題なのかについて少し手がかりを持っていますか?
前もって感謝します、
ジュリアン