Je conçois donc une page Web et j'ai trois images alignées les unes à côté des autres:

Html:

<div id="imgs">
  <img src="img/img_2.jpg" alt="">
  <img src="img/img_1.jpg" alt="">
  <img src="img/img_0.jpg" alt="">
</div>

Css:

#imgs img { 
   width: 29%; 
   margin: 1.5%; 
}

Sur le bureau, je veux garder les trois images côte à côte, mais lorsque je suis sur mobile, je veux ensuite dans un curseur.

0
Gabriel Sultan 5 avril 2020 à 23:33

3 réponses

Meilleure réponse

Une solution simple consiste à créer deux éléments et à afficher le premier si la largeur de la page est> 600 px. Sinon, vous affichez l'autre.

<div id="imgs-flex">
  <img src="img/img_2.jpg" alt="">
  <img src="img/img_1.jpg" alt="">
  <img src="img/img_0.jpg" alt="">
</div>
<div id="img-mobile">
  <img src="img/img_2.jpg" alt="">
  <img src="img/img_1.jpg" alt="">
  <img src="img/img_0.jpg" alt="">
</div>

Et puis dans le CSS:

#img-flex{
  display: flex;
}
#img-mobile{
  display: none;
}

/* You use Media Queries for the responsive */
@media screen and (max-width: 600px){
   #img-mobile{
      display: block;
   } 
   #img-flex{
      display: none;
   }
}

Et vous ajoutez Javascript pour faire votre slider.

0
Thomas Lamothe 5 avril 2020 à 21:07

Si l'écran est plus petit que 600 pixels, les trois images s'affichent l'une en dessous de l'autre. Plus de 600 pixels sont toutes les images placées côte à côte.

J'espère que c'est ce que vous cherchez ...

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 50%; /* for fullscreen take 100% */
  }
}
<div class="row"> 
  <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%;">
   </div>
     <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
   </div>
     <div class="column">
    <img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
   </div>
</div>
0
SwissCodeMen 5 avril 2020 à 21:15

Avez-vous essayé d'utiliser display: flex; et une requête multimédia avec un min-max?

0
jonno182 5 avril 2020 à 20:52