基于视口实现图片自适应缩放的问题求助

问题根源是所有外层容器都设置了固定宽度1000px，当视口宽度小于1000px时，容器无法自适应收缩，导致图片跟着容器一起溢出视口。按以下方式修改代码即可解决：

修改后的CSS代码 #

div {
  font-size: 15px;
  color: #444;
  font-family: sans-serif;
  padding: 0px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 内部元素窄屏时自动换行 */
}

.container2 {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: auto;
  width: 100%; /* 自适应父容器宽度 */
  max-width: 1000px; /* 宽屏时最大宽度限制为1000px */
}

.container>div {
  background-color: #d3d3d3;
  flex: 1 1 250px; /* 平分可用宽度，最小宽度250px，不足时换行 */
  padding: 10px;
}

.divbox2 {
  text-align: left;
  width: 100%; /* 自适应父容器宽度 */
  height: 20px;
}

.divbox3 {
  background-color: #9bad65;
  text-align: center;
  width: 100%; /* 自适应父容器宽度 */
}

修改后的HTML代码 #

<div class="container2">

  <div class="divbox2"></div>

  <div class="container">
    <div>Game:</div>
    <div>User:</div>
  </div>

  <div class="divbox2">Big Lego is a feature of this game.</div>
  <div class="divbox3">
    <img src="tillyimages/images/Terracotta Lego.jpg" loading="lazy" style="max-width: 100%">
  </div>

</div>

关键修改说明 #

• 将container2的固定宽度改为width:100% + max-width:1000px，实现宽屏居中固定宽度、窄屏自适应视口的效果
• 把divbox2、divbox3的固定宽度改为width:100%，让它们继承父容器的自适应宽度
• 给container添加flex-wrap:wrap，并将内部子元素的宽度改为flex:1 1 250px，确保窄屏时两个子元素能自动换行，避免溢出
• 图片保留max-width:100%，确保在容器收缩时同步缩小

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