时间戳

首页 > 解决方案 > 图像不适合所有 PC 尺寸

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

问题描述

首先我想说我花了一整夜在这里寻找答案，因为我的情况不同，我找不到它。我正在制作一个网站，主页以水平方式由 13 张图像组成，我曾经display: flex让它们都以水平方式显示，然后我使用它们position: relative并将absolute它们放置在它们的位置。

这是显示在 1920x1280 宽度上的网站，所以最宽

当它的宽度为 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]: 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。

标签： htmlcss

解决方案

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

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

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

应设置为与您的图像相同的测量类型，width:;并且height:;

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

考虑到这一点，您可能不得不调整您的 CSS。

推荐阅读