如何通过CSS缩小联系表单区块且不干扰子元素布局？

问题根因 #

你当前的联系区块占用空间过大主要由两点导致：

• .section-4 使用了绝对定位+130vh的超高高度，脱离文档流的同时强行占用了超过一视口的空间，顶部60%、底部-50%的定位参数也进一步放大了区块的占位范围
• 内部的表单、图片元素均使用固定rem尺寸，直接修改父容器宽高会挤压子元素，导致内部布局错乱

方案1：改动最小的缩放方案（完全不影响子元素样式） #

该方案直接对表单容器做整体缩放，子元素的相对布局、hover交互效果都不会发生任何变化，仅需修改两处CSS：

1. 修正.section-4的错误定位与高度参数

.section-4 {
  width: 100%;
  /* 移除原有height、top、bottom、position属性 */
  position: relative;
  height: auto;
  padding: 3rem 2rem; /* 上下内边距可按需调整，控制区块上下留白大小 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

2. 给.form-container添加缩放属性，你之前scale不生效就是因为父容器占位异常，加上transform-origin控制缩放原点即可

.form-container {
  /* 原有属性全部保留，新增以下两行 */
  transform: scale(0.75); /* 数值越小缩得越小，0.75代表缩小到原尺寸的75% */
  transform-origin: center top; /* 从区块中心顶部开始缩放，避免上方出现多余空白 */
}

方案2：无缩放的等比例调整方案（避免transform带来的坐标影响） #

如果担心scale缩放会影响表单的点击交互坐标，可以按比例缩小内部元素的固定尺寸，所有参数等比例调整就不会打乱布局：

/* 调整form-container宽度 */
.form-container {
  width: 65%; /* 从80%下调，按需调整 */
  /* 其余属性保留 */
}
/* 缩小左侧图片尺寸 */
.form-img {
  width: 22rem; /* 从30rem下调 */
  padding: 60px; /* 从90px下调 */
  /* 其余属性保留 */
}
/* 缩小右侧表单尺寸 */
.contact-form {
  width: 35rem; /* 从45rem下调 */
  height: 24rem; /* 从30rem下调 */
  padding: 2rem; /* 从3rem下调 */
  /* 其余属性保留 */
}
/* 缩小输入框的字体与内边距 */
.contact-form input,
.contact-form textarea {
  margin: 0.8rem;
  padding: 0.8rem;
  font-size: 1.1rem;
  /* 其余属性保留 */
}

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