3

Twitter Bootstrap のレスポンシブ グリッドを使用しています。次のように、ページの一部としていくつかの画像を含めたいと考えています。

<div class="row">
<div class="span3"><img src="img1.png" /></div>
<div class="span3"><img src="img2.png" /></div>
<div class="span3"><img src="img3.png" /></div>
<div class="span3"><img src="img4.png" /></div>
</div>

ただし、イメージをレスポンシブにするのは困難です。Bootstrap では、イメージの幅がビューポートの幅に直接関係していないためです。これは、たとえばフィラメントアプローチを除外します。

上記の例では、幅 1080 ピクセルの画面で画像がスタックされるため、各 div はビューポート幅の 25% 未満しか占有せず、各画像の幅は ~250 ピクセルで十分です。ただし、幅 750 ピクセルの画面では、div が縦に積み重なってビューポート幅の 100% を占めるため、各画像の幅は ~750 ピクセルである必要があります。

私は次のようなことができると思っていました：

  • デフォルトでは、spacer.gif をロードします。<img src="spacer.gif" />
  • ページの読み込み時に、画像の幅を確認し、適切なサイズを読み込みます

しかし、JavaScript を使用していないユーザーには機能しないことに気付きました。デフォルトで小さな画像を読み込むことができますが、JS を使用していないユーザーは大きな画面で操作性が悪く、一部のユーザーは小さな画像と大きな画像の両方を読み込む必要があります。

推奨事項はありますか？

4

2 に答える 2

1

モバイル デバイスに不必要に大きな画像を読み込まないことが主な関心事であり、JS 以外のオプションを探している場合は、Sencha.io Srcのようなものが役立つかもしれません。基本的に、すべての画像を Sencha 経由でルーティングします。

<div class="row">
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img1.png" /></div>
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img2.png" /></div>
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img3.png" /></div>
  <div class="span3"><img src="http://src.sencho.io/http://yourimageserver.com/img4.png" /></div>
</div>

次に、Sencha サーバーは HTTP リクエスト ヘッダー内のユーザー エージェントをチェックし、ブラウザに関する仕様に基づいて、あらかじめ決められたサイズを提供します。

于 2012-07-08T23:54:56.203 に答える
0

このクライアント側を解決しようとしている場合は、PictureFillを使用できます。

基本的に、これは W3Cで提案されている要素と同様のソリューションを実装しています。以下をマークアップに挿入します (PictureFill サイトの例から)。

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
    <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
    <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

これ<noscript>により、ブラウザがスペーサー.gif をダウンロードする必要がなくなり、JS が利用できない場合のフォールバックとしても機能します。ユーザーは、javascript が無効になっている古いモバイルに適した small.jpg を取得するだけです。

メディア クエリを使用すると、(min-width: ...)デバイスのサイズに基づいてブレークポイントを選択できます(min-device-pixel-ratio: 2.0)。Retina ディスプレイなどの HD デバイスにも使用できます。

目的のために、次のように設定できます。

 <div data-src="image_250x250.jpg"     data-media="(min-width: 1080px)"></div>
 <div data-src="image_750x750.jpg"     data-media="(min-width: 750px)"></div>

また、css でメディア クエリを使用して、250x250 の画像が確実にスタックされるようにします。

それが役立つことを願っています!

于 2013-05-30T04:03:40.340 に答える