jQueryを使用してトリガーされ、ul内の画像を循環する、ある種のスライドショーがあります。画像は CSS でスタイル設定されており、オーバーラップするように絶対に配置され、さりげなくフェードインとフェードアウトします。
問題
レスポンシブ デザインの一部として各画像に 100% の最大幅を指定し、ul に静的な高さを指定しましたが、もちろん画面サイズに応じて画像の高さが変わります。
解決
読み込まれた画像のサイズをjQueryで確認し、それに応じてulのサイズを変更することは可能ですが、これは画像が読み込まれるときに厄介なちらつきにつながります。
CSS ソリューションはありますか?
この jsFiddle で多くのことが説明されています: http://jsfiddle.net/eddturtle/vvsDh/1/
CSS3には「カバー」に設定できる「背景サイズ」プロパティがあるため、代わりに背景画像を使用することで何かを思い付くことができるかもしれません。これがドキュメントです。
私ができることは、画像のリストを非表示にして、代わりに各トランジションの画像ホルダーを作成し、その CSS 背景プロパティを設定することです。この新しいホルダーをフェードインさせ、fadeIn 関数のコールバックを使用して以前のホルダーを DOM から削除します。必要に応じて、フィドルを編集して、このソリューションを実行することができます。
編集***
ほら、おい。これは、必要に応じて正確に機能するはずです。現在、背景画像はカバーするように設定されています。これにより、画像が領域全体を確実に埋めます。画像全体が表示され、比率が制限されていることを確認したい場合は、contain を使用してください。親の #slideshow の高さを必要な高さに調整するだけです。