如何缩小图像以适合屏幕尺寸？

Question

我在一个网站上做了这样的工作，因此4张图片将像this一样位于同一行上，但是在较小的设备上，其中一张图片会向下一行。他们的解决方法是否使他们都在同一行？

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

Answer 1

列

Array<string | undefined>

行

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

Answer 2

是的，绝对是！您应该将图形的宽度设置为width: 25%

因此，使用您提取的html，我会这样做：

.main {
  display: flex;
}

.main figure {
  width: 25%;
}