如何让HTML容器及内部图片div随窗口动态调整尺寸？

嘿，我看了你的代码，问题根源很明显——你给.info-container__img设置了固定的宽高400px，这直接锁死了它的尺寸，自然没法跟着父容器.info-container同步缩放。另外父容器没采用弹性布局来管理内部元素，也限制了响应式效果。咱们一步步来修复：

核心修改思路 #

1. 给父容器添加弹性布局，让内部元素能灵活排列
2. 把图片容器的固定宽高换成相对单位+比例控制，实现自适应
3. 调整偏移方式，避免小屏幕下内容溢出

修改后的完整代码 #

CSS部分

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800");
* {
  box-sizing: border-box;
}

body {
  background-color: #af39fe;
  background-image: linear-gradient(147deg, #af39fe 0%, #4c38fd 74%);
  min-height: 100vh;
  font-family: "Fira Sans", sans-serif;
  display: flex;
  margin: 0;
  padding: 20px;
}

.info-container {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background: #fff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 10px;
  /* 开启弹性布局，让内部元素横向排列 */
  display: flex;
  align-items: center;
  gap: 20px;
  /* 小屏幕自动换行 */
  flex-wrap: wrap;
}

.info-container__img {
  /* 替换固定宽高：弹性占比+维持正方形比例 */
  flex: 1 1 300px;
  aspect-ratio: 1 / 1;
  background-image: linear-gradient(147deg, #af39fe 0%, #4c38fd 74%);
  box-shadow: 4px 13px 30px 1px rgba(252, 56, 56, 0.2);
  border-radius: 10px;
  /* 用margin替代transform，方便小屏幕调整 */
  margin-left: -80px;
  overflow: hidden;
}

.info-container__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.info-container__content {
  /* 内容部分自适应剩余空间 */
  flex: 1 1 300px;
  padding-right: 25px;
}

.info-container__title {
  font-size: 24px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}

.info-container__text {
  color: #4e4a67;
  margin-bottom: 30px;
  line-height: 1.5em;
}

.info-container__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #5b0a6b 0%, #16034b 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}

/* 小屏幕适配：取消图片偏移，避免溢出 */
@media (max-width: 768px) {
  .info-container__img {
    margin-left: 0;
  }
  .info-container__content {
    padding-right: 0;
  }
}

HTML部分（无需修改）

<div class="info-container">
  <div class="info-container__img">
    <img src="https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg">
  </div>
  <div class="info-container__content">
    <div class="info-container__title">About Me</div>
    <div class="info-container__text">This is fake info about a persons life.</div>
    <a href="About.html" class="info-container__button">READ MORE</a>
  </div>
</div>

关键修改说明 #

• 弹性布局：给.info-container添加display: flex后，内部的图片和内容会自动分配空间，小屏幕下还能通过flex-wrap: wrap换行。
• 自适应尺寸：flex: 1 1 300px让图片容器可以随父容器放大缩小，最小宽度保持300px；aspect-ratio: 1/1确保它始终是正方形。
• 响应式细节：用margin-left替代transform实现偏移，配合媒体查询在小屏幕取消偏移，避免内容溢出容器。

这样改完后，图片容器就会完美跟着父容器同步缩放，同时保持你想要的视觉效果啦～

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