CSSを使用したトリプルイメージ

Question

画面の幅が600pxより大きい場合、私は同じ画像を3回並べて表示するようにしています。画面（デバイス幅）が600px未満の場合、単一のイメージが表示されます。

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

マイCSS：

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

Answer 1

あなたは、デフォルトでは表示されません画像の2つの余分なインスタンスが含まれており、それらを表示し、上記の画面幅のために、元の画像の幅を調整するために、あなたのメディアクエリを使用することができます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>