0

私は、Zurb Foundation と Supersized jquery プラグインという 2 つの人気のあるツールをサイトに使用しています。一度一緒に使ったことがあります。ただし、それらを一緒に使用すると、Zurb Foundation CSS が画像の縦横比を圧迫し、Supersized jquery プラグインで画像が歪んでしまいます。これは、ブラウザ ウィンドウを狭くしたときに行われます。

前のサイトでは大丈夫でした。それは私の現在のサイトではできません。

そのため、ウィンドウやデバイスが狭いと画像が圧迫されます。

Zurb CSS を削除すると、Supersized はアスペクト比をそのまま維持するので、Zurb Foundation が行う画像のサイズ変更が原因であることがわかります。では、Supersized の背景画像だけで Zurb CSS を上書きするにはどうすればよいでしょうか。

サイトのデモはここで見ることができます: http://mwildmandesign.com/IBG/index.html

これは、私のサイトで必要なように、少しサイズを変更し、縦横比をそのまま維持するサイトです: http://risd.edu

4

2 に答える 2

0

サイズを変更すると、すべてのブラウザー (IE8+、FF、Safari、Chrome) でアスペクト比が同じように表示されます。これを表示するためにどのブラウザーを使用していますか?


CSS 代替

アスペクト比を維持しながら、完全な背景サイズの画像に対する簡単な解決策は、実際には CSS3 を使用して実現できます (古いブラウザーでは適切にダウングレードします)。画像を表示したまま、画像のサイズを縮小します。

body {
  background: url(img.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

作品:

  1. サファリ 3+
  2. クロム
  3. Opera 10+ (Opera 9.5 は background-size をサポートしましたが、キーワードはサポートしていません)
  4. Firefox 3.6+ (Firefox 4 はベンダープレフィックスのないバージョンをサポートします)

これはcss-tricksのデモです

于 2013-04-10T14:51:41.720 に答える