前端布局求助：图片填满父div与按钮图标对齐问题

我在完成Frontend Mentor挑战时遇到两个布局问题：

• 图片无法完全填满其父级div容器，调整尺寸后仍达不到预期
• 购物车图标无法和按钮文本正确相邻排列，调整位置属性效果不佳

目标效果参考图：

问题1：图片填满父容器的修复 #

问题根源 #

全局样式*设置了padding:10px，会给图片容器也加上内边距，导致图片无法贴满容器；同时图片未设置比例适配规则，容器也没有明确的宽度占比和圆角匹配。

修改方案 #

1. 移除全局*的padding:10px，改为给需要的元素单独添加内边距，避免影响图片容器
2. 给.img-box设置width:50%，匹配容器的一半宽度，同时通过容器的overflow:hidden让图片圆角不溢出
3. 给图片添加object-fit: cover，确保图片按比例填充容器，不会拉伸变形

问题2：购物车图标与按钮文本对齐修复 #

问题根源 #

当前用背景图实现图标时，padding-left值不足，且按钮未设置内部元素的居中规则，另外HTML中存在无用的空span标签。

修改方案 #

1. 调整按钮的background-position和padding-left，给图标和文本留出合理间距
2. 给按钮添加display:flex、align-items:center、justify-content:center，让图标和文本垂直水平居中
3. 移除HTML中无用的<span class="icon"></span>标签

修改后的完整代码 #

CSS代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* 移除全局padding，避免影响图片容器 */
}

:root {
  --font1: "Fraunces", sans-serif;
  --font2: "Montserrat", sans-serif;
  --fs-paragraph: 14px;
  --fs-header1: 40px;
  --primaryColor1: hsl(158, 36%, 37%);
  --primaryColor2: hsl(30, 38%, 92%);
  --neutralColor1: hsl(212, 21%, 14%);
  --neutralColor2: hsl(228, 12%, 48%);
  --neutralColor3: hsl(0, 0%, 100%);
}

body {
  background-color: var(--primaryColor2);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px; /* 给body加内边距，避免内容贴边 */
}

.container {
  display: flex;
  flex-direction: row;
  margin: auto;
  background-color: var(--neutralColor3);
  width: 600px;
  border-radius: 1.5em;
  overflow: hidden; /* 确保子元素圆角不会溢出 */
}

.img-box {
  width: 50%; /* 设置图片容器占一半宽度 */
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例填充容器，不拉伸 */
}

.details {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让内容均匀分布 */
  width: 50%;
  padding: 30px; /* 给详情区加内边距 */
}

.details h2 {
  font-family: var(--font2);
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: var(--fs-paragraph);
  color: var(--neutralColor2);
}

.brand-title p {
  font-family: var(--font1);
  font-size: var(--fs-header1);
  font-weight: bolder;
  color: var(--neutralColor1);
  line-height: 1em;
  margin: 20px 0;
}

.brand-desc p {
  font-family: var(--font2);
  font-size: var(--fs-paragraph);
  color: var(--neutralColor2);
  line-height: 1.8em;
}

.prices {
  display: flex;
  align-items: center;
  gap: 20px; /* 给两个价格加间距 */
  margin: 20px 0;
}

.prices h1 {
  font-family: var(--font1);
  color: var(--primaryColor1);
  font-size: var(--fs-header1);
}

.prices h4 {
  font-family: var(--font2);
  color: var(--neutralColor2);
  text-decoration: line-through;
  font-weight: normal;
}

.addcart button {
  background: url(/images/icon-cart.svg) no-repeat center left 40%; /* 调整图标位置 */
  padding-left: 30px; /* 加大左侧内边距，给图标留出空间 */
  background-color: var(--primaryColor1);
  font-family: var(--font2);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

button {
  border: none;
  border-radius: 0.5em;
  color: var(--neutralColor3);
  width: 100%;
  height: 50px;
}

button:hover {
  background-color: hsl(158, 36%, 25%); /* 添加hover效果，贴近设计 */
}

.attribution {
  font-size: 11px;
  text-align: center;
  margin-top: 20px;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

HTML代码

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz@9..144&family=Montserrat&family=Outfit&display=swap" rel="stylesheet" />

<div class="container">
  <div class="img-box">
    <img src="/images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum" />
  </div>

  <div class="details">
    <div class="brand-title">
      <h2>Perfume</h2>
      <p>Gabrielle Essence Eau De Parfum</p>
    </div>

    <div class="brand-desc">
      <p>
        A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
      </p>
    </div>

    <div class="prices">
      <h1>$149.99</h1>
      <h4>$169.99</h4>
    </div>

    <div class="addcart">
      <button>Add to Cart</button>
    </div>
  </div>
</div>

<div class="attribution">
  Challenge by
  <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
  >. Coded by <a href="#">yes</a>.
</div>

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