Question

如果屏幕的宽度大于600px，我正在尝试图像，这样我的图像可以并排三次。如果屏幕（设备宽度）小于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>

使用CSS的三重图像

1 个答案: