如何根据固定宽度响应式调整图片尺寸并适配网页布局

嘿，这个布局需求我经常碰到，给你一套简洁又靠谱的CSS方案，完美匹配你的要求：

核心思路 #

用Flexbox来搭建基础布局，它能轻松处理右侧固定尺寸图片和左侧自适应剩余空间的组合，同时通过媒体查询在指定断点调整图片大小，完全贴合你的需求。

代码实现 #

HTML结构

<div class="horizontal-block">
  <!-- 左侧：垂直堆叠的文本与按钮 -->
  <div class="left-content">
    <h3>这是你的标题文本</h3>
    <p>这里可以放多行描述内容，会自动垂直堆叠在标题下方，空间足够时会占据接近一半的屏幕宽度~</p>
    <button class="cta-btn">点击触发操作</button>
  </div>
  <!-- 右侧：固定尺寸图片 -->
  <div class="right-image-wrapper">
    <img src="your-image-path.jpg" alt="右侧展示图" />
  </div>
</div>

CSS样式

/* 基础布局框架 */
.horizontal-block {
  display: flex;
  align-items: center; /* 可选：让左右内容垂直居中，按需调整 */
  gap: 2rem; /* 左右模块的间距，可自定义 */
  padding: 2.5rem;
  max-width: 1200px; /* 可选：限制区块最大宽度，避免太宽 */
  margin: 0 auto;
}

/* 左侧内容：自适应剩余空间 */
.left-content {
  flex: 1; /* 关键！自动填充右侧图片之外的所有可用空间 */
  display: flex;
  flex-direction: column; /* 强制文本和按钮垂直堆叠 */
  gap: 1.5rem; /* 文本、按钮之间的间距 */
}

/* 右侧图片容器：固定尺寸，禁止压缩 */
.right-image-wrapper {
  width: 420px; /* 默认固定宽度 */
  flex-shrink: 0; /* 核心：确保图片容器不会被挤压变形 */
}

.right-image-wrapper img {
  width: 100%;
  height: auto; /* 保持图片原有比例 */
  display: block; /* 去掉图片底部默认的空白间隙 */
}

/* 断点1：屏幕小于992px时，缩小图片尺寸 */
@media (max-width: 992px) {
  .right-image-wrapper {
    width: 320px;
  }
}

/* 断点2：屏幕小于768px时，可选改成上下布局（也可以继续保持左右，只调图片大小） */
@media (max-width: 768px) {
  .horizontal-block {
    flex-direction: column;
    text-align: center;
  }
  .right-image-wrapper {
    width: 280px;
  }
}

关键细节解释 #

• flex: 1给左侧容器：不用硬写50%宽度，它会自动占据右侧图片之外的所有空间，完美实现“接近一半但取决于图片尺寸”的要求。
• flex-shrink: 0给右侧容器：确保无论屏幕怎么缩，图片容器都保持设定的固定宽度，不会被压缩。
• 媒体查询断点：你可以根据自己的需求修改max-width值和对应的图片宽度，实现精准的响应式调整。
• 左侧的flex-direction: column：轻松实现文本和按钮的垂直堆叠，配合gap控制间距，布局更整洁。

额外小提示 #

• 如果不需要垂直居中，直接删掉.horizontal-block里的align-items: center就行。
• 更小屏幕下的上下布局是可选的，要是想一直保持左右排列，只保留图片宽度调整的代码即可。

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