0

画像を循環する背景がありますが、これらの画像には固定サイズがありません。

私の問題は、専用の背景画像である画像のサイズを変更するための単純なレスポンシブ フレームが見つからないことです。Web サイトの通常の画像用のプラグインはたくさんあります。

  1. 私のウェブサイトの背景には、常に画像が表示されている必要があります。
  2. トリミングが許可されている場合は、画像を Web ブラウザーの中央に再配置する必要があります。
  3. jQuery または @Media は許可されていますが、あまり気にしません。

私の画像とdivは次のようになります：

<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
    <img src="image1.png">
    <img src="image2.png">
    <img src="image3.png">
</div>

そこにあるプラグインの多くは、幅を 100% に、高さを自動に設定しています。これは、ブラウザの幅が 200px でブラウザの高さが 800px の場合には機能しません。画像は画面全体をカバーせず、縦横比を維持します。画像の上下に「ギャップ」が生じるため、この場合、高さを 100% にし、幅を auto に変更する必要があります。もちろん、ブラウザの高さが 200px でブラウザの長さが 800px の場合は逆になります。

私が欲しいものの例: http://www.martinlogin.se/

4

1 に答える 1

0

画面のアスペクトに応じて、2 つの異なるシナリオを適用するよう求めています。これはメディア クエリで実行できますが、幅と高さをある程度決める必要があります。

幅ベースのサイジングから始めます。

#backgroundDiv {width: 100%; height: auto;}

サイトがあるポイントよりも狭い場合は、高さベースのサイジングに切り替えます。

#backgroundDiv {width: auto; height: 100%;}

予想される視聴者の最も可能性の高い画面サイズ/アスペクト シナリオ、使用している画像などに基づいて、移行が行われる場所を決定する必要があります。

幅ではなく特定の縦横比など、さらに柔軟性を持たせるには、スクリプトが必要です。

于 2013-03-03T19:23:10.570 に答える