Dreifaches Bild mit CSS

Question

Ich versuche ein Bild, wenn die Breite eines Bildschirms größer als 600px ist, so dass ich das Bild dreimal nebeneinander haben. Wenn der Bildschirm (Gerätebreite) kleiner als 600px ist, sollte das einzelne Bild angezeigt werden.

<div class="gallery" style="border: 3px solid green;"> 
    <figure class="photo tripled"> 
     <img src="images/rocket1.jpg" alt="Great Rocket" width="100%"> 
     <figcaption>Rocket 1 (tripled)</figcaption> 
    </figure> 
</div> 

Meine CSS:

@media only screen and (min-width: 600px) { 
    .gallery > .tripled { 
     font-size: 0; 
     display: inline-block; 
     max-width: 24%; 
    } 
} 

Answer 1

Sie 2 zusätzliche Instanzen des Bildes enthalten könnte, die standardmäßig nicht angezeigt werden und Ihre Medien-Abfrage verwenden, um sie anzuzeigen und das Originalbild Breite für Rasterweiten oben anpassen 600px.

.tripleImg { 
 
    display:none; 
 
} 
 
    
 
@media only screen and (min-width: 600px) { 
 
    .tripled { 
 
     font-size: 0; 
 
    } 
 
    .firstImg { 
 
     width: 33.3%; 
 
    } 
 
    .tripleImg { 
 
     display:inline; 
 
    } 
 
}

<div class="gallery" style="border: 3px solid green;"> 
 
    <figure class="photo tripled"> 
 
     <img class='firstImg' src="https://www.gravatar.com/avatar/a31c765009a1a075823bf1e217b5dae9?s=64&d=identicon&r=PG&f=1" alt="Great Rocket" width="100%"> 
 
     <img class='tripleImg' src="https://www.gravatar.com/avatar/a31c765009a1a075823bf1e217b5dae9?s=64&d=identicon&r=PG&f=1" alt="Great Rocket" width="33.3%"> 
 
     <img class='tripleImg' src="https://www.gravatar.com/avatar/a31c765009a1a075823bf1e217b5dae9?s=64&d=identicon&r=PG&f=1" alt="Great Rocket" width="33.3%"> 
 
     <figcaption>Rocket 1 (tripled)</figcaption> 
 
    </figure> 
 
</div>