web-dev-qa-db-ja.com

画面の幅に基づいて画像パスを変更するにはどうすればよいですか？

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

異なる画像サイズを含む2つのフォルダーがあり、画面の幅に応じてパスを変更する方法について誰かが私にアドバイスをくれるかどうか疑問に思っています。

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

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

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

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

10X205

image1.jpg
image2.jpg

620X41

image1.jpg
image2.jpg
jqueryimagepathwindowwidth
17
Mitchell Layzell

$(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/

23
CodingIntrigue

メディアクエリを使用したCSSがオプションの場合は、CSSのみのソリューションを使用できます。

以下のように、CSSにメディアクエリを追加します。

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

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

以下のように、myClassを影響を受ける画像要素に追加します。

<img class="yourClass">

必要に応じて値を少し調整する必要があるかもしれません。

31
Nope

Bootstrapレスポンシブユーティリティ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 -->
4
M61Vulcan

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/");
    }
}
1
ichtyo

この場合、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タグの下部に貼り付けます。

1
webrama.pl

resize（） を使用できます

$(window).resize(function() {
if($(window).width() < 310 ) {
   $('img').attr('src','folder1'+filename);
}
if($(window).width() > 310 ) {
   $('img').attr('src','folder2'+filename);
}

}）;

0
chakroun yesser