如何缩小图像以填充屏幕大小？

Question

I have a website where I have made it so that the 4 pictures will be on the same line like this but on smaller devices one of the pictures goes down a line. Is their a workaround that makes them all on the same line?

This is the 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

column

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

line

.main {
    display:flex;
 }

Answer 2

Yes absolutely! You should set the width of the figures to width: 25%

So with your extracted html I would do:

.main {
  display: flex;
}

.main figure {
  width: 25%;
}