如果适合，如何将图像自动添加到上级行中

Question

我知道这听起来有点愚蠢。我的网站上有一些图片，我希望它们按照适合的方式排列。（我在上面有 3 张图片，但在 phone 中只有一张，但在更大的显示器 4 上，我不想使用 JavaScript）

.rows>* {
    display: table;
    width: 70px;
    margin-right: 0%;

}

.rows img {
    border-radius: 25px;
    height: 15em;
    width: 25em;
    object-fit: cover;
    margin: 10px 10px 0px 10px;
    transition: 
        box-shadow .25s, 
        transform .25s;

}

h3 {
    font-weight: 100;
    text-align: center;
    font-size: 1.5em;
    margin-top: 0.2em;
    margin-bottom: 10px;
}

.rows img:hover {
    cursor: pointer;
    box-shadow: 
        2px 1px 
        rgba(0, 0, 0, 1), 
        4px 3px 
        rgba(0, 0, 0, 0.9), 
        6px 7px
        rgba(0, 0, 0, 0.8),
        7px 8px 
        rgba(0, 0, 0, 0.7), 
        11px 10px 
        rgba(0, 0, 0, 0.6), 
        12px 11px 
        rgba(0, 0, 0, 0.5),
        14px 13px 
        rgba(0, 0, 0, 0.4), 
        16px 17px 
        rgba(0, 0, 0, 0.3), 
        19px 18px
        rgba(0, 0, 0, 0.2),
        19px 20px 
        rgba(0, 0, 0, 0.1);
    transform: 
        rotate(5deg)
        skew(-1deg, -3deg);
    transition: 
        box-shadow .5s, 
        transform .375s;

}

<div class="rows">


    <div><a href="">
        <img src="https://i.blogs.es/9cd4b9/1366_2000/840_560.jpg" alt="">
        <h3>Valorant</h3>
    </a></div>
    <div><a href="">
        <img src="https://cdn1.epicgames.com/offer/fn/PDP_2560x1440_2560x1440-bec2627607d1aeae77fc43d495900ddf" alt="">
        <h3>Fortnite</h3>
    </a></div>
    <div><a href="">
        <img src="https://phantom-marca.unidadeditorial.es/abfd01e815b28d5553ed7ba9fa2e9647/crop/0x0/1980x1112/resize/1320/f/jpg/assets/multimedia/imagenes/2022/03/16/16474267987028.jpg" alt="">
        <h3>League of Legends</h3>
    </a></div>
    <div><a href="">
        <img src="https://fs-prod-cdn.nintendo-europe.com/media/images/10_share_images/games_15/nintendo_switch_4/H2x1_NSwitch_Minecraft_image1600w.jpg" alt="">
        <h3>Minecraft</h3>
    </a></div>
    <div><a href="">
        <img src="https://hipertextual.com/wp-content/uploads/2022/01/call-of-duty.jpeg" alt="">
        <h3>Call of Duty</h3>
    </a></div>
    <div><a href="">
            <img src="https://cdn1.dotesports.com/wp-content/uploads/sites/4/2022/02/22143447/Garena-Free-Fire.jpg" alt="">
            <h3>Free Fire</h3>
    </a></div>
    <div><a href="">
        <img src="https://as01.epimg.net/meristation/imagenes/2021/12/12/noticias/1639306655_172365_1639307441_noticia_normal_recorte1.jpg" alt="">
        <h3>Genshin Impact</h3>
    </a></div>
    <div><a href="">
        <img src="https://pbs.twimg.com/media/FDgyy4fX0AAN_qb?format=jpg&name=small" alt="">
        <h3>Clash Royale</h3>
    </a></div>
    <div><a href="">
        <img src="https://theme.zdassets.com/theme_assets/1094427/189dce017fb19e3ca1b94b2095d519cc514df22c.jpg" alt="">
        <h3>Rocket league</h3>
    </a></div>
    <div><a href="">
        <img src="https://i.blogs.es/2787ba/robloxa/1366_2000.jpeg" alt="">
        <h3>Roblox</h3>
    </a></div>
    <div><a href="">
        <img src="https://play-lh.googleusercontent.com/bUg34NePWclty0hnX2bGZVPCsjsC-6VyQ4fHW9vpNFqSKAYRfa4fICuVWb4awKpsoT0" alt="">
        <h3>Clash of Clans</h3>
    </a></div>
    <div><a href="">
        <img src="https://img.redbull.com/images/c_limit,w_1500,h_1000,f_auto,q_auto/redbullcom/2018/12/14/7518db4d-58a6-4868-aa3c-748ad1dd6dd7/brawl-stars" alt="">
        <h3>brawl stars</h3>
    </a></div>
</div>

我想让它们像普通文本一样自动下降，而不是你也必须对其进行编程（例如 display:inline，但它不起作用）

不过不要介意内容:)

谢谢

Answer 1

这不是一个愚蠢的问题，你的意思是响应能力？所以基本上在 phone 上图像显示在彼此下方，但在笔记本电脑上彼此相邻......而在更大的显示器上甚至更相邻？

如果是。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

https://www.w3schools.com/html/html_responsive.asp

编辑：顺便说一句，如果你进入开发者工具，有一个 phone-tablet 图标，点击它，你可以测试 phones、平板电脑、显示器等的各种宽度没有。

如果适合，如何将图像自动添加到上级行中

How to auto add images into the superior line if they fit

html

css

image