如何让图片恰好占div一半且不扩大该div？（HTML、CSS）

问题回顾 #

你需要实现图片占父容器一半宽度、不撑大容器，同时解决图片和文本重叠的问题，原代码里用float导致布局混乱，padding设置也不合理。

修正方案 #

直接用Flex布局替代float，这是现代布局的最佳选择，能轻松实现分栏且避免重叠：

修改后的HTML

<div class="parent">
  <img src="你的图片地址" alt="parfum">
  <div class="text-wrap">
    <p>text</p>
  </div>
</div>

修改后的CSS

.parent{
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border: 1px solid blue;
  border-radius: 5%;
  /* 用固定宽高替代超大padding，避免容器被撑大 */
  width: 600px;
  height: 400px;
  /* 开启flex布局，自动分栏 */
  display: flex;
  /* 去掉默认padding，改用内部元素的padding控制间距 */
  padding: 0;
}

img{
  /* 图片占父容器50%宽度 */
  width: 50%;
  /* 保持图片比例，填满容器高度，避免拉伸变形 */
  object-fit: cover;
  /* 给图片加圆角，和父容器对应 */
  border-radius: 5% 0 0 5%;
}

.text-wrap{
  /* 文本区域占剩下的50%宽度 */
  flex: 1;
  /* 给文本加内边距，避免贴边 */
  padding: 20px;
  /* 让文本垂直居中（可选） */
  display: flex;
  align-items: center;
}

关键修改点说明 #

• 去掉父容器的padding:175px，改用固定宽高，避免容器被无意义的padding撑大；
• 用display:flex替代float，让图片和文本自动平分容器宽度，彻底解决重叠问题；
• 给图片设置width:50%和object-fit:cover，确保它恰好占一半且保持比例；
• 给文本容器加flex:1自动占剩余空间，用内部padding控制文本间距，比margin-left更可靠。

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