[英]How can I shrink images to fill screen size?
我有一个网站,我已使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>
柱子
.main {
display:flex;
flex-direction: column;
}
线
.main {
display:flex;
}
是的,一点没错! 您应该将数字的宽度设置为width: 25%
所以用你提取的 html 我会这样做:
.main {
display: flex;
}
.main figure {
width: 25%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.