web-dev-qa-db-ja.com

レスポンシブデザインのimg srcを変更しますか？

おそらく3つの異なる「状態」を含むレスポンシブレイアウトをコーディングしようとしています。

風変わりな部分は、テキストの多く、たとえばメニュー項目が画像になるということです-私の考えではなく、私が変更できることは何も恐れていません。

画像はサイズ以外に各状態でわずかに異なるため（たとえば、最小の状態では、メニューは通常のヘッダーではなくフローティングボタンになります）、同じ画像をスケーリングするだけでなく、画像を切り替える必要があります。

そうでなければ、おそらく「adaptive-images.com」を使用します。

そのため、このためのベストプラクティスソリューションに関する情報が必要です。

私が考えることができるもの：

  • 画像を背景として読み込む–少し汚い感じがします。

  • 両方のバージョンを挿入し、CSS表示プロパティを切り替えます–非常に不潔です！

  • すべてのimgリンクを設定するJavaScriptを記述します–少しやり過ぎに感じますか？

良い解決策に座っている人はいますか？ :)

cssimageresponsive-design
19
jonas

数枚の画像（および最適化された画像）であれば、CSSで非表示にしても問題ありません。それがたくさんある場合は、 Response JS を見てください。これにより、srcが即座に変更されます。これを試して：

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

この記事 も読んでください。

Update-追加の例：

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">
14
ryanve

その他のオプション。スクリプトは必要ありません。CSSのみです。

HTML

<div id="mydiv">
    <img src="picture.png" class="image_full">
    <img src="picture_mobile.png"  class="image_mobile">
</div>

CSS

.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
}
28
Maximiliano Catani

今日のほとんどのブラウザ サポートしていますpictureタグ。したがって、ビューポートの幅に応じて画像を変更するために使用できます。

<picture>
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
    <source media="(min-width: 768px)" srcset="/img/medium-size.png">
    <img src="/img/mobile-size.png"/>
</picture>
6
Anrijs Vītoliņš

複数の画像を読み込む必要がなく、帯域幅を節約できるので、私は3番目の選択肢のファンです。

モバイルファーストのデザインのため、最初に次のような小さな画像を読み込みます。

<div id="mydiv">
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>

次に、ドキュメントの読み込み後にこのスクリプトを実行します。

function resizeImages() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    $("#mydiv img").each(function() {
        var oldSrc = $(this).attr('src');
        if (width >= 768) {
            var newSrc = oldSrc.replace('_normal.','_bigger.');
            var newWidth = 100;  var newHeight = 100;
        } else if ( width >= 480 ) {
            var newSrc = oldSrc.replace('_normal.','_big.');
            var newWidth = 50;  var newHeight = 50;
        }
        $(this).attr('src',newSrc);
        $(this).attr('width',newWidth);
        $(this).attr('height',newHeight);
    });
}

画面幅が大きい場合、このスクリプトを使用して小さな画像を大きな画像に変更します。デスクトップコンピューターで高速に実行されます。また、スマートフォンでは実行できません。

2
trante

私がすることは：
各li要素の背景として画像を使用
すべてのサイズのリンク（画像）を持つスプライトを作成します。

___ ___ ___ ___
__ __ __ __
_ _ _ _

より、@ mediaを使用します。例：.

@media only screen and (max-width : 480px) {
 /* here I would make my li smaller */
 /* here I would just change the li background position*/
}

画像「スプライト」はすでにブラウザに読み込まれており、移行は非常にスムーズで高速になります。

1
Roko C. Buljan