17

ウィンドウの幅に応じて、画像が読み込まれるフォルダーを変更しようとしています。

異なる画像サイズを含む 2 つのフォルダーがあり、画面の幅に応じてパスを変更する方法についてアドバイスをいただけないでしょうか。

画面が通常の場合、次の<img>ようになります

<img src="images/620x410/image1.jpg" alt="">

画面がタブレットの幅にある場合は、ロードされます

<img src="images/310x205/images1.jpg" alt="">

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg
4

7 に答える 7

23

を使用$(window).width();してウィンドウのサイズを決定し、それに応じて画像の src を設定できます。

$(function() {
  if($(window).width() <= 310) {
    $("img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("images/620x410/", "images/310x205/"));
    });
  }
});

また、ブラウザ ウィンドウを <= 310px のサイズで開始し、それを超えるサイズに変更しても、画像は小さいバージョンのままであることに注意してください。必要に応じてサイズ変更イベントを使用して対処することを検討してください: http://api.jquery.com/resize/

于 2013-05-28T08:29:31.417 に答える
4

Bootstrap Responsive ユーティリティの visible-xs と hidden-xs を使用して、同様の効果を達成しました。ブラウザー ウィンドウのサイズに応じて、カルーセルに別の画像セットを使用する必要がありました。

        <div class="carousel slide hidden-xs" id="site-banner-big"  data-ride="carousel">   <!-- only show this carousel on large screens -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><center><img src="images/site-banner/large/image01.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/large/image02.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/large/image03.jpg" alt="Image"></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-big -->

<div class="carousel slide visible-xs" id="site-banner-small"  data-ride="carousel">   <!-- only show this carousel on small screens -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><center><img src="images/site-banner/small/image01.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/small/image02.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/small/image03.jpg" alt="Image"></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-small -->
于 2015-07-04T20:43:57.650 に答える
1

Web ページ内のさまざまな画像に「画像変更パス システム」を使用しようとしています。アイデアは、「背景」画像を変更する代わりに（単一の画像のみ）、画面の向きに応じて画像パスを変更したいと考えています。

phpに関しては

$("#imageId").attr("src", "your new url here");

このようなものですが、方法はわかりません

@media screen and (orientation: landscape) 
{
    .yourClass {
        content:url("images/landscape/");
    }
}

@media screen and (orientation: portrait) {
    .yourClass {
        content:url("images/portrait/");
    }
}
于 2014-01-09T14:43:04.253 に答える
1

この場合、DOM Ready (jQuery の $(document).ready) を待つのは得策ではないと思います。プレーンな JavaScript を使用することをお勧めします。

if (screen.width < 620) {
    var imgs = document.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) 
    {
        imgs[i].src = imgs[i].src.replace("images/620x410/", "images/310x205/");
    }
}

body タグの一番下に貼り付けます。

于 2013-05-28T08:39:55.047 に答える
0

本当に別の画像が必要な場合は、いいえオプションが最適です。しかし、多くの場合、同じ画像を異なるサイズで表示したいだけです。したがって、おそらく「混合」ソリューション：

 @media screen and (max-width: 310px)
 {
 .yourClass_img1 {content:url("images/310x205/image1.jpg");}
 .img_list{width:100%;height:100%}
 }

 @media screen and (min-width: 620px) 
 {
 .yourClass_img1 {content:url("images/620x410/image1.jpg");}
 .img_list{width:60%;height:60%}
 }

それで、いくつかの画像が本当に異なる必要がある場合は、「content:url」が効果的です。「width:height」が画像に適している場合は、サイズを変更するだけです。

于 2021-07-22T11:53:28.550 に答える