javascript - 如何缩小图像以填充屏幕尺寸？

Question

我有一个网站，我已经制作了它，这样 4 张图片将像这样在同一行上，但在较小的设备上，其中一张图片在一行上。他们是一种使他们都在同一条线上的解决方法吗？

这是html：

    <center>
    <h1>Meet Our Officers!</h1>
    <center>
    <div class="main">
        <figure>
            <img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
            <center><figcaption><h2>President</h2></figcaption></center>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
            <center><figcaption><h2>Vice President</h2></figcaption></center>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
            <center><figcaption><h2>Secertary</h2></figcaption></center>
        </figure>
        <figure>
            <img src="boysmeettheofficers/Adnan AL-Zoibi.jpg" width="275" height="300" alt="missing">
            <center><figcaption><h2>Treasurer</h2></figcaption></center>
        </figure>
    </div>

标签： javascripthtmlcss

Answer 1

柱子

.main {
    display:flex;
    flex-direction: column;
 }

线

.main {
    display:flex;
 }