图片溢出card-box容器问题求助：调整宽高及display无效

问题出在你给.image设置的视窗单位上——100vh和50vw是基于浏览器窗口的尺寸，完全脱离了父容器.card-box的约束，直接导致图片容器撑破卡片。另外img的height:100%会跟着.image的超大高度走，进一步加剧溢出。

按下面的修改就能达到预期效果：

• 移除.image的height:100vh和width:50vw，改用width:100%让它铺满卡片宽度，同时设置合适高度（或用aspect-ratio维持图片比例）
• 给.image添加顶部圆角border-radius: 1.5em 1.5em 0 0，和卡片的圆角对齐
• 给img设置object-fit: cover，确保图片按比例填充容器不拉伸，同时用width:100%和height:100%填满容器
• 移除.container的z-index: -1，避免卡片被页面其他元素遮挡
• 给.card-box添加overflow: hidden，彻底防止内部元素溢出圆角

修改后的完整代码 #

CSS代码

*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", "sans-serif";
}

body{
  background-color: hsl(30, 38%, 92%);
  min-height: 100vh; /* 让body占满视窗高度，方便卡片居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  /* 移除不必要的定位属性 */
}

.card-box {
  max-width: 400px;
  background-color: white;
  border-radius: 1.5em;
  overflow: hidden; /* 确保内部元素不会溢出圆角 */
}

.image{
  width: 100%;
  height: 250px; /* 可根据需求调整，或替换为aspect-ratio: 16/9; */
}

img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product</title>
</head>

<body>
    <div class="container">
        <section class="card-box">
            <section class="image">
                <img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="Coffee mug" class="cofee-mug">
            </section>
            <section class="details">
                <p>coffee mug</p>
            </section>
        </section>
    </div>
    
</body>
</html>

补充：如果想要图片完整显示不裁剪，可把object-fit: cover替换为object-fit: contain，但可能会在图片周围出现空白，按需选择即可。

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