Question

首先，我想说的是，我整夜都在这里寻找答案，因为我的案子不同，所以找不到。我正在制作一个网站，并且主页包含13张水平图片，我使用display: flex使其全部显示为水平图片，并使用position: relative和absolute进行了调整在他们的位置。

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

当它的宽度为1920x1280时，一切似乎都可以，但是一旦显示器的宽度为1680和更小，页面就会遍历网站。因此，图片停留在同一位置，但是页面超出了监视器的宽度，并且显示了水平滚动。

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

我花了十多个小时来尝试制作它，但这只是我不知道怎么做。

这是我用于此气泡框的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]: https://i.stack.imgur.com/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;
}

这是我用于气泡框div的代码：

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

我尝试将每个图像的位置更改为“绝对”，但没有帮助。我尝试将所有这些图像分成两个单独的div，并设置它们的宽度：50％，因此它们始终占据页面的100％，但没有帮助。我尝试在每个图像上添加div，然后将所有图像的宽度都添加为等于页面100％的宽度，但还是没有帮助。

任何提示或帮助实际上意味着很多，所以谢谢！祝福

*我想说的是，我只需要PC屏幕帮助，我已经使移动部件正常工作，并且该部件正常工作。因此，只有PC尺寸> 1920。

Answer 1

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

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

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

应设置为与图像width:;和height:;相同的测量类型

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

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

图像不适合所有PC尺寸

1 个答案:

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