所以我想在网站的整个宽度上有3张图片,每张图片都是1/3。我希望他们能够在不同的屏幕尺寸下做出相应的响应和缩放比例,并让他们保持宽高比,我会怎么做呢?如何制作3幅跨网站响应宽度的图像?
到目前为止,我已经管理这个,但是当网站缩小时,它们非常不自然地收缩。
下面是它到目前为止的代码:
#content {
height: auto;
width: 100%;
font-size: 0px;
display: flex;
}
.images {
width: 33.33%;
height: 800px;
}
<div id="content">
<img src="images/phantom.png" class="images" alt="Image of an actor from the musical Phantom of the Opera">
<img src="images/lion_king.png" class="images" alt="Image of an actor from the musical Lion King">
<img src="images/wicked.png" class="images" alt="Image of an actor from the musical Wicked">
</div>
这工作,的但是高度图像混乱了,所有不同的高度,不与页脚齐平。我将如何修补高度呢? – PinkieBarto
想告诉我一个例子,你有什么和你想要你的当前图像 – dippas
当然,基本上我有图像的原始大小不降低质量,所以高度略有不同。我上传的网站在GitHub的页面来告诉你发生了什么: https://pinkiebarto.github.io/LondonWestEnd/ 我在寻找它被刷新到页脚像这样: HTTP:/ /i.imgur.com/QGuKOAM.png – PinkieBarto