Changer img src dans les designs responsive?

Je suis sur le point de code d'un réactif de mise en page qui sera probablement contenir trois différents "états".

L'étrange, c'est que la majeure partie du texte, par exemple des éléments de menu seront des images – pas mon idée et que je ne peux rien changer, j'ai peur.

Depuis les images diffèrent légèrement, autres que la taille, pour chaque état (par exemple, dans le plus petit état du menu devient flottante boutons au lieu d'un en-tête normale), j'ai besoin de basculer l'affichage des images au lieu de simplement la mise à l'échelle les mêmes.

Si ce n'était pas pour qui je serais probablement aller avec "adaptive-images.com".

Donc, j'ai besoin d'une certaine entrée sur une meilleure solution pour cela.

Ce que je pouvais penser:

  • Le chargement des images comme arrière-plan – se sent un peu sale.
  • Insérer les deux versions et activer /désactiver la propriété css display – très sale!
  • Écrire un code javascript qui définit toutes les img liens – se sent un peu exagéré?

Quelqu'un assis sur une bonne solution? 🙂

source d'informationauteur jonas

  1. 13

    Si c'est juste quelques images (et ils sont optimisés) puis les cacher via CSS n'est pas un problème. Si c'est beaucoup, alors jetez un oeil à Réponse JS qui va changer la src à la volée pour vous. Essayez ceci:

    <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">

    Lire cet article trop.

    Mise à jour - extra exemple:

    <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. 22

    Autre option. Pas besoin de scripts, uniquement 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. 2

    Je suis le fan de 3e choix, car il ne fait pas de charger plusieurs images et économise de la bande passante.

    En raison de mobile-conception première, j'ai d'abord charger des petites images comme ceci:

    <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>

    Puis après le document de la charge j'exécute ce 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);
    });
}

    Si la largeur de l'écran est grande, alors j'ai changer de petites images pour les plus grands avec ce script. Il court vite sur les ordinateurs de bureau. Et il n'est pas exécuté dans les smartphones.

  4. 2

    D'aujourd'hui, la plupart des navigateurs soutiennent picture tag.
    De sorte que vous pouvez l'utiliser pour modifier des images en fonction de fenêtre d'affichage de la largeur.

    <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>
  5. 1

    Ce que je voudrais faire est de:

    utiliser des images comme arrière-plan de chaque li élément

    créer un sprite avec les liens (images) dans toutes les tailles:

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

    Que, à l'aide de @e média.g:.

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

    Les images 'sprite' sera déjà chargée dans le navigateur et la transition se fait très fluide et rapide.