html - 图片不适合所有 PC 尺寸

Question

首先我想说的是，我在这里花了整整一夜的时间寻找答案，但由于我的情况不同，所以找不到。我正在制作一个网站，主页由 13 张水平方向的图像组成，我使用 display: flex 让它们全部水平显示，我使用 position: relative 和 absolute 以适应它们的位置。

This is the website showing on 1920x1280 width, so the fullest width

当它的宽度为 1920x1280 时，一切似乎都正常，但一旦显示器宽度为 1680 或更小，页面就会遍历网站。所以图片停留在同一个地方，但页面超出了显示器的宽度，并且显示了水平滚动。

我希望所有图像都适合屏幕，所以如果显示器的宽度是 1600 或 1480，它会自动适合屏幕并以相同的方式显示。

我已经花了 10 多个小时试图做到这一点，但我只是不知道该怎么做。

这是我用于此气泡框的 HTML:

<!-- Buble Box #1 -->
<div class="bubbleboxes">

<img class="pic firstb" src="assets/img/bubbles/firstb.png">

<img class="pic secondb" src="assets/img/bubbles/secondb.png">

<img class="pic thirdb" src="assets/img/bubbles/thirdb.png">

<img class="forthb" src="assets/img/bubbles/forthb.png">

<img class="fifthb" src="assets/img/bubbles/fifthb.png">


<img class="sixstb" src="assets/img/bubbles/sixstb.png">

<img class="seventhb" src="assets/img/bubbles/seventhb.png">

<img class="eightb" src="assets/img/bubbles/eightb.png">

<img class="ninethb" src="assets/img/bubbles/ninethb.png">

</div>
<!-- End Bubble Box -->

<!-- Bubble Box #2 -->

<div class="bubbleboxes boxmargin">

<img class="tenb" src="assets/img/bubbles/tenb.png">

<img class="elevenb" src="assets/img/bubbles/elevenb.png">

<img class="twelveb" src="assets/img/bubbles/twelveb.png">

<img class="thirteenb" src="assets/img/bubbles/thirteenb.png">

</div>

<!-- End Bubble Box -->


  [1]: /image/RUzL2.png

然后我单独为每张图片设置样式:

.secondb {
    height: 200px;
    position: relative;
    bottom: -12px;
}

.thirdb {
    height: 200px;
    position: relative;
    right: 18em;
    top: 11.5em;
}

.forthb {
    height: 250px;
    position: relative;
    top: 88px;
    right: 19em;

}

.fifthb {
    height: 200px;
    position: relative;
    right: 19em;
    top: 11.5em;
}

.sixstb {
    height: 200px;
    position: relative;
    right: 37em;
    bottom: -12px;
}

.seventhb {
    height: 250px;
    position: relative;
    right: 38.5em;
    bottom: -2em;
}

.eightb {
    height: 270px;
    position: relative;
    right: 42em;
    bottom: 9em;
}

.ninethb {
    height: 320px;
    right: 66em;
    position: relative;
    top: 10.5em;
}

.tenb {
    height: 300px;
    position: relative;
    top: 3em;
    left: 2em;
}

.elevenb {
    height: 300px;
    position: relative;
    top: 2em;
}

.twelveb {
    left: 4em;
    height: 350px;
    position: relative;
    bottom: 3em;
}

.thirteenb {
    position: relative;
    height: 250px;
    top: 7em;
    left: 2em;
}

这是我用于 bubbleboxes div 的代码:

.bubbleboxes {
    width: 100%;
    display: flex;
    margin-left: 15px;
    margin-top: 25px;
}

我已经尝试将每个图像的位置更改为绝对，但没有帮助。我尝试将所有这些图像分成两个单独的 div，将它们设置为 width: 50%，因此它们总是占据页面的 100%，但它没有帮助。我尝试将 div 添加到每个图像并将宽度添加到所有图像以等于页面的 100% 宽度，但也没有帮助。

任何提示或帮助实际上都意义重大，非常感谢!最良好的祝愿

*我想说的是，我只需要 PC 屏幕方面的帮助，我已经让移动部分正常工作并且该部分工作正常。所以只有 PC 尺寸 > 1920。

Answer 1

您的所有图像都需要自动缩放，这意味着它们需要使用随窗口大小缩放的测量值。

这些图像的定位属性需要使用与您的图像相同的测量类型。

top:; bottom:; left:; right:;

应设置为与图像 width:; 和 height:;

相同的测量类型

这样它们会随窗口大小缩放。可接受的测量值 vh、vw、vmin、vmax、%

考虑到这一点，您可能需要调整 CSS。