Discussion :

[BonCev]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Azerx]

Regarde ce genre de choses:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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

[BonCev]

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

[Azerx]

Parfait, pense à changer l'état de ton topic en "résolu"