如何解决图片溢出问题？附CSS代码及相关截图

问题分析 #

当前代码导致溢出的核心原因：

1. 移动端未调整flex布局方向，.row保持横向排列，两个.col各占50%宽度，加上内边距后内容易超出视口；
2. 媒体查询中给.col h1设置固定80px字体，小屏设备上尺寸过大直接引发文本溢出；
3. .container固定height: 100vh，内容高度超过视口时容器无法自适应撑开，导致整体溢出。

修改后的完整代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('bkg2.jpg');
  width: 100%;
  /* 改用min-height，内容超出时容器自动撑开 */
  min-height: 100vh;
  background-position: center;
  background-size: cover;
  padding-left: 8%;
  padding-right: 8%;
  box-sizing: border-box;
}

.row {
  height: 100%;
  display: flex;
  align-items: center;
}

.col {
  flex-basis: 50%;
}

.col h1 {
  color: #fff;
  font-size: 10vmin;
}

.ctn1 {
  padding: 8px 15px;
  background: red;
  color: whitesmoke;
  border-radius: 20px;
}

.col p {
  color: #fff;
  font-size: 20px;
  line-height: 20px;
}

.col button {
  width: 180px;
  color: black;
  padding: 12px 0;
  background: #fff;
  border: 0;
  border-radius: 20px;
  outline: none;
  margin-top: 30px;
}

@media(max-width: 650px) {
  /* 切换flex垂直排列，实现文本在上、图片在下 */
  .row {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2rem;
  }
  
  /* 移动端让col占满容器宽度 */
  .col {
    flex-basis: 100%;
    margin-bottom: 2rem;
  }
  
  /* 用视口单位动态调整标题大小，避免溢出 */
  .col h1 {
    font-size: 12vmin;
  }
  
  /* 优化移动端段落可读性 */
  .col p {
    font-size: 16px;
    line-height: 24px;
  }
}

关键修改说明 #

• .container替换height: 100vh为min-height: 100vh：保证容器至少覆盖视口，内容过多时自动延伸，避免溢出；
• 媒体查询中给.row添加flex-direction: column：让两个.col垂直排列，自然实现文本在上、图片在下的布局；
• 移动端设置.col的flex-basis: 100%：让每个列占满容器宽度，充分利用屏幕空间；
• 标题字体改用12vmin：基于视口宽度动态缩放，比固定80px更适配小屏设备；
• 调整段落字体大小和行高：提升移动端文本可读性，避免拥挤溢出。

内容的提问来源于stack exchange，提问作者Hyun Hae Park