如何确保页面折叠/缩放时图片所在区块不发生位移？

问题描述 #

页面缩放时，.dws-wrapper的图片位置保持不变，但.swd-wrapper的图片会向下偏移。希望实现页面缩放时，图片所在区块不会向侧边移动，具体效果如下：

期望效果：

实际效果：

现有代码如下：

CSS代码 #

.dws-wrapper {
  width: 480px;
  height: auto;
  margin: 210px auto 0;
  font-family: "Montserrat", sans-serif;
  position: relative;
  background: linear-gradient(20deg, #f00, #00f);
  overflow: hidden;
  top: 50%;
  right: 14.3%;
}

.swd-wrapper {
  width: 480px;
  height: auto;
  margin: 210px auto 0;
  position: relative;
  background: linear-gradient(20deg, #f00, #00f);
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  left: 16%;
  margin-top: -25.1%;
}

HTML代码 #

<div class="dws-wrapper">
  <a href="Panic!AtTheDisco.html">
    <img src="PanicAtTheDisco1.jpg" alt="PanicAtTheDisco" />
    <div class="dws-text">
      <h2>Panic!</h2>
      <h2>At the</h2>
      <h2>Disco</h2>
    </div>
  </a>
</div>
<div class="swd-wrapper">
  <a href="TheNeighbourhood.html">
    <img src="I Love You_.jpg" alt="TheNeighbourhood" />
    <div class="swd-text">
      <h2>The</h2>
      <h2>Neighbourhood</h2>
    </div>
  </a>
</div>

问题原因 #

当前布局使用了百分比单位的margin和相对定位偏移，这些值会随着视口宽度的变化动态计算，导致页面缩放时元素位置偏移。比如.swd-wrapper的margin-top: -25.1%和left:16%，视口宽度改变时，百分比对应的实际像素值会变化，从而引发布局错位。

解决方案 #

改用Flex布局实现两个区块的并排排列，Flex布局会自动处理元素的对齐和间距，确保视口变化时布局稳定。具体修改如下：

修改后的HTML代码 #

新增父容器包裹两个区块：

<div class="container">
  <div class="dws-wrapper">
    <a href="Panic!AtTheDisco.html">
      <img src="PanicAtTheDisco1.jpg" alt="PanicAtTheDisco" />
      <div class="dws-text">
        <h2>Panic!</h2>
        <h2>At the</h2>
        <h2>Disco</h2>
      </div>
    </a>
  </div>
  <div class="swd-wrapper">
    <a href="TheNeighbourhood.html">
      <img src="I Love You_.jpg" alt="TheNeighbourhood" />
      <div class="swd-text">
        <h2>The</h2>
        <h2>Neighbourhood</h2>
      </div>
    </a>
  </div>
</div>

修改后的CSS代码 #

/* 父容器用Flex实现水平居中排列 */
.container {
  display: flex;
  justify-content: center;
  gap: 20px; /* 两个区块的间距，可按需调整 */
  margin-top: 210px; /* 保持顶部原有间距 */
  flex-wrap: wrap; /* 视口过窄时自动换行，避免横向溢出 */
}

.dws-wrapper, .swd-wrapper {
  width: 480px;
  height: auto;
  font-family: "Montserrat", sans-serif;
  position: relative;
  background: linear-gradient(20deg, #f00, #00f);
  overflow: hidden;
  /* 移除原有的top/right/left/margin-top属性，避免偏移 */
}

效果说明 #

修改后，两个区块会水平居中排列，页面缩放时：

• 视口宽度足够时，区块保持并排，位置稳定
• 视口过窄时，区块自动换行，不会出现偏移或溢出问题

内容的提问来源于stack exchange，提问作者OskarPion