Comment produire différentes images dépend de l'écran utilisateur?

Par exemple, si j'ai deux jeux d'images pour mon site, un ensemble est de faible résolution, un autre ensemble est de haute résolution, je montre le faible niveau de résolution de la taille de l'écran comme 1280 utilisateurs de largeur, et les autres sont des images haute résolution, comment peut-on Je fais ça? En utilisant javascript? Ou toute autre méthode? Possibilité de définir dans css ou html?

Vous pouvez utiliser des requêtes multimédias CSS pour cela. En savoir plus sur les requêtes média ici .

Exemple:

/* This block applies to all "screen" devices */ @media screen { .some-content { background-image: url(largeimage.jpg); } } /* This media query applies only to "screen" devices with a maximum width of 1279px (eg, < 1280) */ @media screen and (max-width: 1279px) { /* Use `mediumimage.jpg` on these devices instead of the above */ .some-content { background-image: url(mediumimage.jpg); } } /* This media query applies only to "screen" devices with a maximum width of 639px (eg, < 640) */ @media screen and (max-width: 639px) { /* Use `smallimage.jpg` on these devices instead of the above */ .some-content { background-image: url(smallimage.jpg); } } 

Notez l'ordre décroissant de ce qui précède: Tout d'abord, nous spécifions pour le plus grand périphérique, puis les plus petits, puis les plus petits, de sorte que ces dernières requêtes remplacent les précédentes (étant donné qu'un périphérique avec un écran de, par exemple, 1024 pixels correspond au premier Deux règles).

Vous pouvez le concevoir avec quelque chose comme le corps {largeur: 100%; Hauteur: 100%; Position: relative;}

Vous allez faire face à ce problème pour la compatibilité du navigateur.

Définissez-le dans votre css vous pouvez avoir n'importe quelle classe que vous souhaitez. Je l'ai fait pour mon site Web et vous pouvez avoir la même image qui fonctionne pour vous.