it-swarm.com.de

Wie ändert man einen Bildpfad basierend auf der Bildschirmbreite?

Ich versuche, den Ordner zu ändern, aus dem meine Bilder abhängig von der Fensterbreite gelesen werden.

Ich habe zwei Ordner, die die unterschiedlichen Bildgrößen enthalten. Ich frage mich, ob mir jemand Ratschläge geben kann, wie der Pfad in Abhängigkeit von der Bildschirmbreite geändert werden kann.

Wenn der Bildschirm normal ist, würde der <img> aussehen

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

wenn der Bildschirm in der Tablettbreite ist, wird er geladen

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

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg
17

Sie können $(window).width(); verwenden, um die Größe des Fensters zu bestimmen, und dann die Quelle der Bilder entsprechend einstellen:

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

Sie sollten auch beachten, dass, wenn ich mein Browser-Fenster mit einer Größe von <= 310px starte und die Größe dann auf darüber senke, die Bilder immer noch kleiner sind. Sie sollten in Betracht ziehen, das Größenänderungsereignis zu verwenden, um dies gegebenenfalls zu bekämpfen: http://api.jquery.com/resize/

22
CodingIntrigue

Wenn CSS mit Medienabfragen eine Option für Sie ist, können Sie eine reine CSS-Lösung verwenden. 

Fügen Sie die Medienabfragen zu Ihrem CSS hinzu (siehe unten):

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

Fügen Sie die myClass zu Ihren betroffenen Bildelementen hinzu, ähnlich wie im Folgenden:

<img class="yourClass">

Möglicherweise müssen Sie die Werte ein wenig für Ihre Bedürfnisse anpassen.

30
Nope

Einen ähnlichen Effekt habe ich mit den Bootstrap Responsive-Dienstprogrammen visible-xs und hidden-xs erzielt. Ich musste je nach Größe des Browserfensters ein anderes Bild in einem Karussell verwenden.

        <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

Ich versuche, das "Bildänderungspfadsystem" für verschiedene Bilder innerhalb der Webseite zu verwenden. Die Idee ist, statt das "Hintergrundbild" zu ändern (also nur ein einzelnes Bild). Ich möchte es ändern Der Bildpfad hängt von der Bildschirmausrichtung ab:

wie für php 

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

art davon aber weiß nicht wie

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

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

Ich denke nicht, auf DOM Ready (jQuery $ (document) .ready)) zu warten, ist in diesem Fall eine gute Idee . Verwenden Sie einfach 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/");
    }
}

Fügen Sie es am unteren Rand Ihres Body-Tags ein.

1
webrama.pl

Sie können resize () verwenden

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

});

0
chakroun yesser