3

例: この Web サイトは非常に良い例です。

STEP-1:ひとつのタブで

  • ページをロードするだけ
  • 右端の列に画像を表示します。解像度が 638x368 であることがわかります。

STEP-2:新しいタブを開いて...

  • ページをロードし、 Firebug または Developer Tools を開きます ( F12)
  • [ネットワーク] (または[ネット]) タブに移動します。
  • ブラウザのサイズを変更してページをリロードする
  • ブラウザ ウィンドウを再度最大化する
  • 右端の列に画像を表示します。解像度が 356x205 であることがわかります。

明らかに、これは JavaScript/jQuery の策略 (+ その他の技術) です。右端の列の画像を調べると、次のようなコードが表示されるからです。

<div class="article-img-container">
  <a data-turbo-target="post-slider" href="http://mashable.com/2012/12/27/gdigital-therapy-dog/">
    <span class="_ppf">
      <span data-q="true" data-s="http://rack.2.mshcdn.com/media/.../438c2f93/107/GeriJoy.jpg" data-z="638x368#"></span>
      <span data-q="(min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../46c08de9/107/GeriJoy.jpg" data-z="1276x736#"></span>
      <span data-q="(max-width: 1160px)" data-s="http://rack.2.mshcdn.com/media/.../fa9bdb7b/107/GeriJoy.jpg" data-z="356x205#"></span>
      <span data-q="(max-width: 1160px) and (min-resolution: 1.5dppx)" data-s="http://rack.3.mshcdn.com/media/.../42ebf99d/107/GeriJoy.jpg" data-z="712x410#"></span>
      <span data-q="(max-width: 480px)" data-s="http://rack.2.mshcdn.com/media/.../948312d1/107/GeriJoy.jpg" data-z="280x157#"></span>
      <span data-q="(max-width: 480px) and (min-resolution: 1.5dppx)" data-s="http://rack.0.mshcdn.com/media/.../da1d8905/107/GeriJoy.jpg" data-z="560x314#"></span>
      <img src="http://rack.2.mshcdn.com/media/ZgkyMDEyLzEyLzI3L2QyL0dlcmlKb3kuNWYyZWYuanBnCnAJdGh1bWIJNjM4eDM2OCMKZQlqcGc/438c2f93/107/GeriJoy.jpg">
    </span>
  </a>
</div>

...あなたがページの場合は存在しませんview-source。このようなことを行うオープンソースの JavaScript ライブラリはありますか?

そして、これを何と呼びますか？アダプティブ イメージ?

私が聞きたい単純な質問は...ブラウザのビューポートサイズまたは画面解像度に基づいて、異なるサイズの画像を異なるデバイスに提供することは可能ですか?

4

1 に答える 1

1

素晴らしい答えは、これはJavaScriptなしでしばらくの間可能だったということです

将来、<picture>要素はまさに使用され、必要とされるものです。HTML は次のようになります。

<picture>
    <source srcset="examples/images/large.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/medium.jpg" media="(min-width: 800px)">
    <source srcset="examples/images/small.jpg">

    <img srcset="examples/images/small.jpg" alt="Desciption of image">
</picture>

これは基本的に以下のテクニックと同じですが、書き方が簡単になり、 ではなく に役立ちimgますbackground-image。この回答を書いている時点で、ポリフィルを使用してこの形式または@mediaクエリを使用できます

CSS2 メディア タイプ@mediaでは、ビューポートのサイズに基づいてページのさまざまなスタイルに影響を与えることができるクエリが導入されました。これにより、必要な場合にのみ大きな画像を背景画像として提供できます。その使用例は次のとおりです。

.myImg { background-image:url(myurlSmall.png); } /* Start with smallest */

/* Serve larger image only if needed */
@media (min-width:400px) {
    .myImg { background-image:url(myurlMedium.png); }
}
@media (min-width:1200px) {
    .myImg { background-image:url(myurlLarge.png); }
}
/* etc. */
于 2014-05-22T21:25:06.497 に答える