web-dev-qa-db-fra.com

Requêtes @media et permutation d'images

Je suis nouveau sur CSS et sur ce forum. Mais je travaille sur un petit projet dans lequel je souhaite que l'image de mon site change complètement lorsque le navigateur est redimensionné. 

J'ai utilisé des requêtes de médias? mais je ne peux pas sembler bien faire les choses.

htmlcssmedia-queriesimagesource
12
Aarati Akkapeddi

Dans le futur, veuillez ajouter le code que vous avez essayé.

s'il s'agit d'une balise image, vous pouvez utiliser une classe. Masquer la deuxième image lors du chargement de la page et afficher + masquer l'image 1 à une certaine taille d'écran, comme suit:

HTML

<img src="image.jpg" class="image1"/>
<img src="image.jpg" class="image2"/>

CSS

.image2{
   display: none;
}

@media only screen and (max-width: 500px){ //some value
   .image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

EXEMPLE 1 - NAVIGATEUR DE RÉTRACTATION

OU

S'il s'agit d'un background-image, vous pouvez simplement échanger l'image:

HTML

<div class="example"></div>

CSS

.example{
   background-image: url("example.jpg");
}

@media only screen and (max-width: 500px){ //some value

   .example{
      background-image: url("example2.jpg");
   }
}

EXEMPLE 2 - NAVIGATEUR À RÉTRACTATION

39
jmore009

Cela peut être fait à l'aide de l'élément picture de HTML5 qui ne nécessite pas de CSS pour modifier les éléments img dans des requêtes multimédia spécifiées. Si cette approche vous intéresse, sachez que son navigateur prend en charge qui NE _ PAS inclut IE, bien qu'il existe un polyfill pour les anciens navigateurs.

<h1>Resize Window</h1>
<picture>
  <source srcset="https://placehold.it/1400x1400" media="(min-width: 1400px)"/>
  <source srcset="https://placehold.it/1200x1200" media="(min-width: 1200px)"/>
  <source srcset="https://placehold.it/800x800" media="(min-width: 800px)"/>
  <source srcset="https://placehold.it/600x600" media="(min-width: 600px)"/>
  <img src="https://placehold.it/400x400" alt="example"/>
</picture>

7
ekfuhrmann

Vous pouvez utiliser la propriété content pour insérer votre image. Cependant, les images incluses comme ceci pourraient être difficiles à styliser. ( Exécuter un extrait de code en plein écran avant de redimensionner le navigateur )

@media screen and (max-width: 479px) {
    div img {
        display:none;
    }
    div::before {
        content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
    }
}
<p>Resize this window to see image change</p>
<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" />
</div>

0
che-azeh