1

問題があり、質問の言い回しに問題があると思います。そのため、答えが見つかりません。

柱の高さが100％に及ぶ画像があるサイトがあります。1000pxのビューポート幅より上でそれを見ているとき、それは素晴らしく見えます。しかし、下にスクロールすると、次の画像のように、明らかに歪んで非常に引き伸ばされます。

ここに画像の説明を入力してください

私の質問は、背景画像ではなく、高さを100％伸ばしながら、アスペクト比を維持する画像を作成するにはどうすればよいかということです。超大型のjsプラグインのようなものですが、バックグラウンド全体ではなく、単一のdivにのみ存在します。

サイトのライブバージョンはhttp://faithpointdallas.com/422studiosで見ることができます

それはFirefoxで望み通りに動作し、サファリを完全に吸い込みます。すべてのブラウザでFirefoxの結果を達成する方法はありますか？

助けてくれてありがとう。

4

2 に答える 2

2

背景画像を使ってみませんか？background-sizeあなたが望むことを正確に行うプロパティがあります。

topImageHTMLのdivを削除して、これを試してください。

div.top {
  background: url("../img/dallas.jpg") no-repeat scroll center center / cover transparent;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}
于 2013-02-04T23:46:14.807 に答える
1

幅を100％と言うにはCSSを使うべきだと思います。それはあなたの問題を解決するはずです。

background-size: 100%;

詳細については、こちらを確認してくださいhttp://www.css3.info/preview/background-size/

于 2013-02-04T23:45:52.227 に答える