桌面端容器水平偏移定位，移动端居中平滑缩放的响应式页面问题

我正在制作一个简单的响应式页面，需求如下：

• 移动端元素可正常缩放、居中且适配窗口宽度；
• 桌面端容器及内容放大至最大宽度，但始终保持水平居中。

另外希望在浏览器宽度允许的情况下，容器div能与视口边缘保持不同距离（例如一个距右侧5%，另一个距左侧8%），以达成设计美感。

我尝试过使用calc结合vw宽度、媒体查询，但无法实现理想效果：浏览器缩小时图片会被裁切，或出现尺寸突变。请问有解决思路吗？

原代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basura</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  
  
  <style>
    body {
      background-color: whitesmoke;
      margin: 20px; 
      padding: 0;      
      font-family: 'Times New Roman', Times, serif;
      font-size: 16px;
      line-height: 1.2;
    }

    /* Link styles */
    a {
      color: blue; /* Set link color to blue */
      text-decoration: none; /* Remove default underline */
    }

    /* Hover and active link styles */
    a:hover,
    a:active,
    a:focus {
      text-decoration: underline; /* Underline link on hover, click, or focus */
    }

    .container {
      background-color:;
      margin-bottom: 80px;
      padding: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; /* Change flex direction to column */
      position: relative; /* Add position relative */
      margin-top: 0px; /* Add margin-top for spacing */
    }


    /* Custom CSS for text boxes */
    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px; /* Add margin-top for spacing */
      margin-left: auto; /* Align to the right */
      margin-bottom: 0px; /* Add margin-bottom for spacing */
      text-align: left; /* Align text to the left */
    }


  </style>
</head>

<body>

  <div class="container first-container" style="max-width: 1000px">
    <div style="background-color: lightgreen; width: 100%">
<center><img src="https://source.unsplash.com/random?car" style="max-width: 100%"></center></div>

    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>

  <div class="container second-container" style="max-width: 800px">
    <div style="background-color: orange; width: 100%">
<center><img src="https://source.unsplash.com/random?cat" style="max-width: 100%"></center>
    </div>

    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>



</body>
</html>

要实现自定义侧边距+平滑响应式过渡的效果，核心是用CSS的margin结合max-width，配合clamp()函数实现连续尺寸过渡，避免媒体查询的突变，同时保证图片不被裁切。

关键调整点 #

1. 移除body的固定margin，改为给容器设置自适应边距，避免干扰自定义侧边距
2. 用clamp()定义容器宽度：移动端自动适配视口，桌面端到达最大宽度后停止放大
3. 给图片添加object-fit属性，配合width:100%; height:auto保证缩放时比例正确，不被裁切
4. 通过CSS变量给不同容器设置差异化的侧边距，小屏幕时自动居中

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basura</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  
  <style>
    body {
      background-color: whitesmoke;
      padding: 0;      
      font-family: 'Times New Roman', Times, serif;
      font-size: 16px;
      line-height: 1.2;
    }

    a {
      color: blue;
      text-decoration: none;
    }

    a:hover,
    a:active,
    a:focus {
      text-decoration: underline;
    }

    .container {
      margin-bottom: 80px;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      margin-top: 0;
      /* 核心：clamp实现自适应宽度，兼顾移动端边距和桌面端最大宽度 */
      width: clamp(0px, 100% - 40px, var(--max-width));
      /* 自定义侧边距，小屏幕时auto自动居中 */
      margin-left: var(--margin-left, auto);
      margin-right: var(--margin-right, auto);
    }

    /* 第一个容器：距右侧5%，最大宽度1000px */
    .first-container {
      --max-width: 1000px;
      --margin-right: 5%;
    }

    /* 第二个容器：距左侧8%，最大宽度800px */
    .second-container {
      --max-width: 800px;
      --margin-left: 8%;
    }

    /* 图片容器确保不裁切 */
    .img-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      overflow: hidden;
    }

    .img-wrapper img {
      max-width: 100%;
      height: auto;
      object-fit: contain; /* 保持图片完整，如需铺满容器可改为cover */
    }

    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px;
      margin-left: auto;
      margin-bottom: 0;
      text-align: left;
    }

  </style>
</head>

<body>

  <div class="container first-container">
    <div class="img-wrapper" style="background-color: lightgreen;">
      <img src="https://source.unsplash.com/random?car">
    </div>
    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>

  <div class="container second-container">
    <div class="img-wrapper" style="background-color: orange;">
      <img src="https://source.unsplash.com/random?cat">
    </div>
    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>

</body>
</html>

原理说明 #

• clamp(min, preferred, max)：这里clamp(0px, 100% - 40px, var(--max-width))表示容器宽度最小为0，优先取「视口宽度减40px」（保证移动端基础边距），视口足够宽时最大不超过自定义的--max-width
• CSS变量：通过--max-width、--margin-left等变量快速区分不同容器样式，维护更方便
• 图片自适应：object-fit: contain确保图片缩放时保持完整比例，不会被容器裁切；如需铺满容器可改为object-fit: cover
• 自定义侧边距：视口宽度大于容器最大宽度时，百分比侧边距生效；视口变窄时，auto让容器自动居中，适配移动端需求

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