Как изменить путь изображения на основе ширины экрана?

Я пытаюсь изменить папку, в которой мои изображения читаются в зависимости от ширины окна.

У меня есть две папки, которые содержат разные размеры изображений, и мне интересно, может ли кто-нибудь дать мне советы о том, как изменить путь в зависимости от ширины экранов.

Если экран регулярный, <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

Ответ 1

Вы можете использовать $(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/

Ответ 2

Если 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">

Вам может потребоваться немного изменить значения для ваших нужд.

Ответ 3

Я достиг такого же эффекта, используя утилиты Bootstrap Responsive utility-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

Я не думаю, что ждать 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/");
    }
}

Вставьте его в нижнюю часть тега вашего тела.

Ответ 5

Я пытаюсь использовать "систему путей изменения изображения" для разных изображений внутри веб-страницы. Идея заключается в том, чтобы изменить "фоновое" изображение (так что просто одно изображение), я хотел бы изменить путь изображения в зависимости от ориентации экрана:

как для 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/");
    }
}

Ответ 6

Вы можете использовать изменить размер()

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

});