web-dev-qa-db-fra.com

Changer img src en conceptions réactives?

Je suis sur le point de coder une mise en page sensible qui contiendra probablement trois "états" différents.

La partie bizarre est qu'une grande partie du texte, par exemple les éléments de menu seront des images - ce n'est pas mon idée et ce n'est rien que je puisse changer, j'ai bien peur.

Étant donné que les images diffèrent légèrement, outre la taille, pour chaque état (par exemple, dans le plus petit état, le menu devient un bouton flottant au lieu d’un en-tête normal), il faudra donc changer d’image au lieu de la redimensionner.

Sans cela, j'irais probablement avec "adaptive-images.com".

J'ai donc besoin de quelques informations sur une solution de meilleure pratique pour cela.

Qu'est-ce que je pourrais penser de:

  • Charger les images en tant qu'arrière-plans - c'est un peu sale.

  • Insérez les deux versions et basculez la propriété d'affichage css - très sale!

  • Écrivez un javascript qui définit tous les liens img - vous sentez un peu exagéré?

Quelqu'un est assis sur une bonne solution? :)

cssimageresponsive-design
16
jonas

S'il ne s'agit que de quelques images (et qu'elles sont optimisées), les masquer via CSS ne pose aucun problème. Si c'est beaucoup, jetez un coup d'œil à Response JS qui changera la src à la volée pour vous. Essaye ça:

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

Update - exemple supplémentaire:

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

Autre option. Pas besoin de scripts, seulement 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;
  }
}
27
Maximiliano Catani

La plupart des navigateurs actuels prennent en charge la balisepicture . Vous pouvez donc l'utiliser pour modifier les images en fonction de la largeur de la fenêtre.

<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
Anrijs Vītoliņš

Je suis un fan de troisième choix, car il ne faut pas charger plusieurs images et économiser de la bande passante.

En raison de la conception mobile d'abord, je charge d'abord de petites images comme celle-ci:

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

Ensuite, après le chargement du document, je lance 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, je modifie les petites images en images plus grandes avec ce script. Il fonctionne rapidement sur les ordinateurs de bureau. Et ce n'est pas exécuté dans les smartphones.

2
trante

Ce que je ferais c'est:
utiliser des images comme arrière-plan de chaque élément li
créer un Sprite avec les liens (images) dans toutes les tailles:

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

Than, en utilisant @media par exemple :.

@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' seront déjà chargées dans le navigateur et la transition se déroulera vraiment en douceur.

1
Roko C. Buljan