Image différente selon écran

Version imprimable

Bonjour

Je ne sais pas si je poste au bon endroit ....

je souhaite afficher une image différente pour mon site si on est sur mobile.

Je viens de découvrir ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, opera-closeup-400.jpg 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w"> </picture>
Je ne sais pas comment l'adapter à ma situation sachant que je n'ai que 2 images :
une image header.jpg qui fait 1200px de large et une image header-mobile.jpg qui fait 750 de large.

Merci

@media screen

Regarde ce genre de choses:

Code:

1
2
3
4
5
6
7
8
 
@media screen and (max-width: 480px)
{
    taClasse
    {
        tonCodeCSS
    }
}

07/03/2016, 14h18
BonCev

Du coup je me suis débrouiller avec bootstrap, mais peux tu développer ta solution.

Et que mettrais tu dans le code css ?

dans le but de renvoyer une image différente selon le device.
09/03/2016, 15h15
Azerx

Peut-être créer deux div, chacune contenant une image différente. Si la taille de ton écran est grande l'une est affichée et l'autre non (et inversement quand la taille devient petite).
On pourra utiliser des "display: hidden", "display: (inline-)block"! ;)
09/03/2016, 16h02
BonCev

Citation:

Envoyé par Azerx

Peut-être créer deux div, chacune contenant une image différente. Si la taille de ton écran est grande l'une est affichée et l'autre non (et inversement quand la taille devient petite).
On pourra utiliser des "display: hidden", "display: (inline-)block"! ;)

ok, c'est ce que fait bootstrap aussi
09/03/2016, 16h14
Azerx

Parfait, pense à changer l'état de ton topic en "résolu" :-o
09/03/2016, 16h24
BonCev

Il n'est qu'a moitié résolu car la solution dont je parlais dans le premier ne charge que l'image nécessaire alors nos solutions chargent les 2 images (meme si une seule s'affiche)
09/03/2016, 16h49
Azerx

Cela doit venir d'un problème de code si les deux images sont chargées, à toi de voir!
09/03/2016, 16h53
Invité

Bonjour,

en PHP, voir : http://mobiledetect.net

Permet de détecter le média AVANT envoi du HTML au navigateur.
On peut donc choisir ce qu'on veut afficher ou pas.