当使用不同的滚动/分辨率时，如何阻止图像移动

Question

我目前正在用HTML/CSS制作一个公文包。但我遇到了一个问题，每当我改变滚动级别或分辨率大小时，网站上的图像就会四处移动。我希望他们留在他们目前所在的街区，在1920x1080的监视器上100%变焦。

我试图将CSS中的位置更改为绝对位置，但这删除了一些图像，并完全改变了左侧图像的位置。

这是代码：

.row {
text-align: center;
}
.containerPortfolio {
position: relative;
text-align: center;
display: inline-block;
margin: 0 auto;
}
.containerPortfolio .content {
position: absolute;
width: 400px;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 400px;
padding: 15px;
}

<div class="row">
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio2.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio3.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio4.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio5.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio6.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio7.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio8.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
</div>

Answer 1

经过更多思考，我找到了解决方案。

我制作了一个新的<div>，并将其命名为inblock。在那之后，我只做了几行额外的CSS，比如：

.inblock {
max-width: 1920px;
min-width: 1080px;
margin: auto;
justify-content: center;
}

然后，我的图像四处移动并从他们的组中移出的问题得到了解决。新更新的HTML如下：

<div class="inblock">
<div class="row">
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio2.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio3.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio4.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio5.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio6.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio7.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
<div class="containerPortfolio">
<img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio8.jpg">
<div class="content">
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>

ondragstart是我后来加入的东西，但它基本上只是意味着用户不能用鼠标拖动图像。

希望我已经充分解释了这一点，这对其他人也适用：(