使用不同 scroll/resolution 时如何阻止图像移动？

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> 并在块中为其指定了 class 名称。在那之后我只是做了一些额外的行 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 是我后来加入的，但它基本上只是意味着用户不能用鼠标拖动图像。

希望我已经对此进行了足够的解释，并且这对其他人也适用:)

使用不同 scroll/resolution 时如何阻止图像移动？

How to stop an image from moving when using different scroll/resolution?

html

css

image

responsive-design