web-dev-qa-db-fra.com

Comment changer un chemin d'image en fonction de la largeur de l'écran?

J'essaie de changer le dossier depuis lequel mes images sont lues en fonction de la largeur de la fenêtre.

J'ai deux dossiers qui contiennent les différentes tailles d'image et je me demande si quelqu'un pourrait me donner un conseil sur la façon de changer le chemin en fonction de la largeur de l'écran.

Si l'écran est normal, le <img> ressemblerait à

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

et si l'écran était dans la largeur de la tablette, il serait chargé

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

310X205 

image1.jpg
image2.jpg

620X410 

image1.jpg
image2.jpg
jqueryimagepathwindowwidth
17
Mitchell Layzell

Vous pouvez utiliser $(window).width(); pour déterminer la taille de la fenêtre, puis définir le src des images en conséquence:

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

Vous devriez également noter que si je lance la fenêtre de mon navigateur à une taille de <= 310px, puis la redimensionne au-dessus, vos images seront toujours la version la plus petite. Vous voudrez peut-être envisager d’utiliser l’événement resize pour lutter contre cela si nécessaire: http://api.jquery.com/resize/

22
CodingIntrigue

Si le CSS utilisant des requêtes de médias est une option pour vous, vous pouvez utiliser une solution CSS uniquement. 

Ajoutez les requêtes multimédia à votre CSS de la même manière que ci-dessous:

@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");
  }
}

Ajoutez la myClass à vos éléments d’image obtenus comme ci-dessous:

<img class="yourClass">

Vous devrez peut-être modifier légèrement les valeurs pour répondre à vos besoins.

30
Nope

J'ai obtenu un effet similaire en utilisant les utilitaires Bootstrap Responsive visibles-xs et hidden-xs. J'avais besoin d'utiliser un jeu d'images différent dans un carrousel en fonction de la taille de la fenêtre du navigateur.

        <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

J'essaie d'utiliser le "système de changement d'image" pour différentes images de la page Web ... " le chemin des images en fonction de l'orientation de l'écran:

comme pour php 

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

genre de cela, mais ne sais pas comment

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

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

Je ne pense pas que l'attente de DOM Ready (jQuery $ (document) .ready) soit une bonne idée dans ce cas . Mieux vaut utiliser du javascript simple:

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

Collez-le au bas de votre tag body.

1
webrama.pl

Vous pouvez utiliser 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