如何让图片适配Div容器，消除底部白边并满足指定宽高要求？

问题分析 #

你遇到的核心问题有两个：

• 图片底部的白边：源于图片默认是行内替换元素，浏览器会为其预留基线对齐的空隙
• 图片无法占满容器50%宽、100%高：当前#photo容器未设置尺寸约束，且图片仅定义了max-width:100%，未配置高度规则

另外你的HTML存在重复id问题：#description同时用于外层容器和内部文本容器，这会导致CSS选择器失效，必须修正。

解决方案 #

1. 给图片容器设置明确尺寸 #

为#photo容器添加宽高规则，匹配你需要的50%容器宽度、100%容器高度：

#photo {
  width: 50%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden; /* 避免图片超出容器圆角范围 */
}

2. 消除图片底部白边 #

以下两种方式任选其一即可解决：

• 将图片转为块级元素：

img {
  display: block;
}

• 或修改图片的垂直对齐方式：

img {
  vertical-align: bottom;
}

3. 让图片完全填充容器 #

设置图片宽高为100%，并通过object-fit保证图片比例不变形：

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
  /* 若希望图片完整显示（可能出现留白），可改用object-fit: contain */
}

4. 修正HTML重复id问题 #

将内部文本容器的id改为唯一名称，比如#desc-text：

<div id="description">
  <div id="header"> P E R F U M E</div>
  <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
  <div id="desc-text">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>
  <!-- 其余代码不变 -->
</div>

修改后的完整代码 #

CSS代码 #

.container {
  background-color: white;
  height: 90%;
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}

#photo {
  width: 50%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#description {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

HTML代码 #

<main>
  <div class="container">
    <div id="photo">
      <img src="https://via.placeholder.com/300">
    </div>
    
    <div id="description">
      <div id="header"> P E R F U M E</div>
      <h2 id="name">Gabrielle Essence Eau De Parfum</h2>
      <div id="desc-text">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</div>
      
      <div id="price">
        <div id="newprice">$149.99</div>
        <div id="oldprice">$169.99</div>
        <button id="add">Add to Cart</button>
      </div>
    </div>
  </div>
</main>

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