6

私はレスポンシブ画像を初めて使用しますが、次の CSS を使用して、Safari、Opera、および Chrome (IE については知りません) で画像をスケーリングする方法を見つけました。

img {   
  max-width: 100%;   
  width: auto;   
  height: auto; 
}

画面サイズが変更されると、画像が拡大縮小されます。Firefox では、width:auto を width:100%; に変更しない限り、画像は拡大縮小されません。次に、Safari は、ロードまたはリロード時にイメージを何もない状態にします。ただし、現金を清算するとフルサイズになります。Zen 7.5-dev レスポンシブ テーマを使用して Drupal に取り組んでいます。また、css ファイルを SASS に保持していますが、これはおそらく単なる CSS の問題です。HTML 5 または CSS3 側で何かを見逃したのかもしれません。

とにかく、次のようなFirefox固有のディレクティブで画像の幅をオーバーライドすることで、うまくいくようになりました。

/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {  
  img {   
    width: 100%;   
  }
}

私はこれを行う必要はないと思います.Googleはこの問題に遭遇していないようです.

4

8 に答える 8

9

これは、レスポンシブ イメージに使用されるデフォルトの CSS です。

img {
  max-width: 100%;
  height: auto;
  width:100%;
}

そして、これは必須の Javascript です: Bongard.net

Javascript の David Bongard に感謝します。

次に、スクリプトの「if safari」ルールに次を追加します。

for (var i = 0; i < document.getElementsByTagName("img").length; i++) {
  document.getElementsByTagName("img")[i].style.width = "auto";
  }

Safariはwidth:auto;、私がテストした残りのブラウザが満足していることを望んでいますwidth:100%;

于 2013-06-13T16:03:40.143 に答える
7

これは私のために働く

@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {    
     img{
        max-width: 100%;
    }    
}
于 2014-03-27T16:10:52.543 に答える
2

画像がシュリンク ラッピング コンテナー内にある可能性が高く、画像の幅に基づいて幅を計算する必要があります。そして、画像の最大幅はコンテナの幅の 100% です。

それが起こっている場合、CSS 仕様は実際には、親の幅が子に依存し、子の幅が親に依存するようなマークアップの動作を定義していません。

この問題に関する議論については、https://bugzilla.mozilla.org/show_bug.cgi?id=823483を参照してください。

于 2013-02-06T11:18:02.910 に答える
1

画像の幅を px で指定したり、パディングを指定したり、画像の display:block の代わりに display:table を使用したりすると、一部またはすべてのブラウザーで画像の応答性が適切に機能しません。

于 2015-04-14T07:20:49.190 に答える
1

あらゆる種類のコードとフィドルを試した後、私のcssのこの簡単な版は私のためにトリックをしました:

img {width: 100%;}

次に、画像のサイズを変更したい場所で、「幅」パラメーターを追加せずに定義します（ソースからの元のサイズに変更します）。サイズを固定したい場合は、SRC スタイルに「幅」パラメーターを追加するだけです (通常の width="" 定義は機能しません)。段落のインライン画像の場合は、それを div でラップし、その div を好きな側に揃えます。とってもシンプル！

Google、Firefox、IE の両方で機能します。乾杯！

于 2015-04-24T07:28:24.683 に答える
0

Kridsada Thanabulpong の jsfiddle を使用しましたが、画像をラップする div から display:table を削除したときにのみ機能しました。

于 2014-09-10T22:50:49.630 に答える