图片旁的article元素无法随图片同步自适应缩放如何解决

根因 #

• 现有布局未给article和图片设置联动的宽度规则，仅将article设为inline-block只能实现两个元素横向排列，article宽度默认由内容撑开，没有和父容器/图片的宽度做绑定，因此不会跟随窗口缩放同步变化。

修复代码 #

修改后的CSS： #

#begin {
  width: 100%;
  position: relative;
  /* 新增弹性布局，让子元素自适应分配宽度 */
  display: flex;
  /* 可选：设置子元素垂直对齐方式 */
  align-items: flex-start;
  /* 可选：设置两个元素的间距 */
  gap: 20px;
}

#inline {
  /* 按需求设置宽度占比，示例为和图片1:1分配宽度，可自行调整数值 */
  flex: 1;
  /* 避免内容溢出撑破容器 */
  min-width: 0;
}

#an {
  /* 和article的flex值对应，实现等比同步缩放 */
  flex: 1;
  /* 保证图片自适应且比例不变 */
  width: 100%;
  height: auto;
}

调整说明 #

如果需要调整两个元素的宽度比例，仅需修改flex属性值即可：

• 比如要图片占2/3宽度，article占1/3，就把#an的flex设为2，#inline的flex设为1
• flex布局下所有子元素的总宽度会自动填满父容器，窗口缩放时两个元素会按比例同步变化

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