求助：如何用CSS实现指定布局并让图片宽高保持相等？

需要实现的布局要求：

• 图片居左，宽度占总宽度30%，且宽高始终相等
• 描述文本居右，占剩余宽度
• 元信息位于描述文本下方靠右位置

现有代码无法实现图片宽高相等的效果，以下是修正方案：

修正后的HTML代码 #

<div id="root">
    <h1 class="title">Lorem ipsum title</h1>
    <div class='outer-parent'>
        <!-- 新增图片容器控制正方形比例 -->
        <div class="image-container">
            <img class='image-parent' src="some_image" alt="内容图片"/>
        </div>

        <div class='text-parent'>
          <span class='description'>
              In publishing and graphic design, Lorem ipsum is a 
              placeholder text commonly used to
              demonstrate the visual form of a document or a typeface 
              without relying on 
              meaningful content. Lorem ipsum may be used as a 
              placeholder before final copy is 
              available.
          </span>
          <span class="meta">Published: 12/12/2012 | Views: 22</span>
        </div>
    </div>
</div>

修正后的CSS代码 #

.title {
  text-align: center;
}
.outer-parent {
  display: flex;
  gap: 1%; /* 用gap统一控制间隙，比margin更规范 */
}
.text-parent {
    display: flex;
    flex-direction: column;
    width: 69%; /* 30%图片 +1%间隙 = 69%文本宽度，保证总占比100% */
}
/* 核心：通过容器实现正方形布局 */
.image-container {
    width: 30%;
    position: relative;
    /* padding-top的百分比基于容器宽度，100%即可实现正方形 */
    padding-top: 100%;
}
.image-parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 保持图片比例，避免拉伸变形 */
    object-fit: cover;
    /* 若不想裁剪图片，可替换为object-fit: contain; */
}
.text-parent .meta {
  align-self: flex-end;
}
.text-parent .description {
  flex-grow: 1;
}

关键修正说明 #

1. 正方形图片实现：直接给img设置高度会拉伸变形，改用容器+padding-top:100%的方式——容器宽度固定30%，padding-top的百分比基于宽度计算，确保容器始终是正方形，再将图片绝对定位填满容器。
2. 图片比例保护：用object-fit: cover保证图片按比例填充容器，避免拉伸；若需要完整显示图片，可替换为object-fit: contain。
3. 布局细节修正：原HTML存在img标签语法错误（src属性写法、闭合问题），给h1补上了对应.title类；用gap替代margin控制间隙，调整文本宽度保证总布局占比合理。

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