Изменить img src в гибких проектах?

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

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

Поскольку изображения будут отличаться незначительно, кроме размера, для каждого состояния (например, в наименьшем состоянии меню становится плавающими кнопками вместо обычного заголовка), мне нужно будет переключать изображения, а не просто масштабировать их.

Если бы не это, я бы, наверное, пошел с "adaptive-images.com".

Итак, мне нужен какой-то ввод для решения этой лучшей практики.

О чем я мог подумать:

  • Загрузка изображений в качестве фона - кажется немного грязным.

  • Вставьте обе версии и переключите свойство отображения css - очень грязно!

  • Напишите javascript, который устанавливает все ссылки img - немного переборщил?

Кто-нибудь сидит на хорошем решении?:)

Ответы

Ответ 1

Если это всего лишь несколько изображений (и они оптимизированы), то скрыть их через CSS не составит труда. Если это много, взгляните на Response JS, который изменит src на лету для вас. Попробуйте следующее:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

Прочитайте эту статью.

Обновить - дополнительный пример:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">

Ответ 2

Другой вариант. Не нужны скрипты, только CSS.

HTML

<div id="mydiv">
    <img src="picture.png" class="image_full">
    <img src="picture_mobile.png"  class="image_mobile">
</div>

CSS

.image_full{
   display:block;
  }

 .image_mobile{
  display:none;
 }

@media (max-width: 640px) and (min-width: 320px){
  .image_full{
   display:none;
  }

  .image_mobile{
   display:block;
  }
}

Ответ 3

Я поклонник 3-го выбора, потому что он не позволяет загружать несколько изображений и экономить полосу пропускания.

Из-за дизайна с мобильных устройств сначала загружаю небольшие изображения следующим образом:

<div id="mydiv">
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>

Затем после загрузки документа я запускаю этот script:

function resizeImages() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    $("#mydiv img").each(function() {
        var oldSrc = $(this).attr('src');
        if (width >= 768) {
            var newSrc = oldSrc.replace('_normal.','_bigger.');
            var newWidth = 100;  var newHeight = 100;
        } else if ( width >= 480 ) {
            var newSrc = oldSrc.replace('_normal.','_big.');
            var newWidth = 50;  var newHeight = 50;
        }
        $(this).attr('src',newSrc);
        $(this).attr('width',newWidth);
        $(this).attr('height',newHeight);
    });
}

Если ширина экрана велика, я меняю маленькие изображения на более крупные с помощью этого script. Он быстро работает на настольных компьютерах. И он не запускается в смартфонах.

Ответ 4

Что я буду делать:
использовать изображения в качестве фона каждого элемента li
создайте спрайт со ссылками (изображениями) всех размеров: 

___ ___ ___ ___
__ __ __ __
_ _ _ _

Затем, используя @media, например:. 

@media only screen and (max-width : 480px) {
 /* here I would make my li smaller */
 /* here I would just change the li background position*/
}

Спрайт изображений будет загружен в браузере, и переход произойдет очень плавно и быстро.

Ответ 5

Большинство современных браузеров поддерживают picture тег. Таким образом, вы можете использовать его для изменения изображений в зависимости от ширины видового экрана.

<picture>
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
    <source media="(min-width: 768px)" srcset="/img/medium-size.png">
    <img src="/img/mobile-size.png"/>
</picture>