如何实现Div内文本与图片随窗口尺寸响应式缩放？

核心问题是你使用固定像素值定义字体大小，窗口缩小时文本高度无法按比例收缩，导致flex容器高度被文本固定，图片无法继续缩放。以下是针对性的修改方案：

关键修改步骤 #

• 用clamp()结合视窗单位（vw）替换固定像素字体大小，让文本随窗口宽度动态缩放，同时限制字体的最小/最大值
• 调整flex容器的布局属性，确保左右两栏高度始终同步
• 优化图片容器样式，让图片完全适配容器高度

修改后的CSS代码 #

.custom-text {
  font-family: montserrat,sans-serif;
  color: white;
}

/* 替换固定px为clamp+vw，实现响应式字体缩放 */
.sky-header{
  font-weight: 400; 
  font-size: clamp(3rem, 8vw, 5rem); /* 最小3rem，最大5rem，中间按8vw自适应 */
  text-shadow: 3px 3px #373737;
  margin: 0; /* 移除默认margin避免额外高度 */
}

.wthin{
  font-weight: 100;
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
}

.wthinbigger{
  font-weight: 100;
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
}

.sky-mask-right {
  position: relative;
  z-index: 1;
  margin-right: -18%;
  height: 100%; /* 确保容器占满父级高度 */
}

.sky-curve-right{
  height: 100%;
  background-image: linear-gradient(135deg,rgba(226, 75, 252, 1) 0%,rgb(146, 48, 163) 100%);
}

@media only screen and (min-width: 992px) {
  .sky-mask-right {
    clip-path:url(#sky-clip-right)
  }
}

.ratio-svg-right{
  width: 50%;
  display: flex; /* 确保内部容器能撑满高度 */
  flex-direction: column;
}

.ratio-img-right{
  width: 50%;
}

.sky-img{
  width: 100%;
  height: 100%; /* 强制图片容器占满父级高度 */
  overflow: hidden;
}

.sky-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填充容器，保持比例 */
}

.sky-content-right{
  padding-left: 10%;
  padding-top: 1%;
  padding-bottom: 2%; /* 添加底部内边距避免文本贴底 */
  margin-right: 10%;
  flex-grow: 1; /* 让内容容器自动填充剩余空间 */
}

.sky-column{
  float: left;
  width: 30%;
}

.sky-list-text{
  font-weight: 200;
}

.col-equal-height{
  display: flex;
  flex: 1;
  overflow: hidden; /* 替换overlay为hidden，避免不必要的滚动条 */
  flex-wrap: nowrap; /* 强制两栏不换行 */
  align-items: stretch; /* 确保两栏高度一致 */
  min-height: 300px; /* 设置最小高度，避免窗口过小时布局坍塌 */
}

li::marker {
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

代码说明 #

1. 响应式字体：clamp()函数让字体在指定范围内自适应，vw单位确保字体随窗口宽度比例变化，避免固定像素导致的高度固定问题
2. Flex容器优化：align-items: stretch强制左右两栏高度一致，flex-wrap: nowrap防止窗口过小时两栏换行
3. 图片适配：给图片容器设置height:100%，图片用object-fit: cover填充容器，确保图片始终和文本栏高度同步缩放
4. 布局稳定性：添加min-height避免窗口极小时布局坍塌，移除不必要的margin和调整内边距优化内容展示

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