如何为div与图片设置背景，实现亚马逊同款无白边显示效果？

问题分析 #

你当前的代码存在两个核心问题：

• CSS语法错误：img的width: 100%后缺少分号，导致height: 100%未生效，图片无法填满容器高度，露出了image-block的红色背景
• 图片默认是行内元素，存在基线对齐的留白，也会导致容器底部出现空隙

解决方案 #

修改CSS代码，修复语法问题并调整图片的显示方式，同时让容器背景与图片的白色背景一致，实现无缝融合效果：

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  border-radius: 4px;
}

.image-block {
  background: #fff; /* 与图片白背景一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-block img {
  width: 100%; /* 修复语法错误，添加分号 */
  height: 100%;
  display: block; /* 消除行内元素的基线留白 */
  object-fit: contain; /* 保持图片比例，完整显示在容器内 */
}

.information {
  padding: 10px;
}

.information p {
  font-size: 0.875rem;
  line-height: 1.5;
}

关键调整说明 #

1. 修复img的CSS语法错误，确保宽高属性生效
2. 将image-block的背景设为白色，与图片自带的白背景匹配，即使图片边缘有空白也不会露出其他颜色
3. 用display: block消除图片作为行内元素的默认留白
4. 给image-block添加flex布局，让图片在容器内居中显示，同时结合object-fit: contain保证图片比例不变，完整填充容器且不拉伸变形
5. 移除margin: auto，改用flex布局实现更稳定的居中效果

这样调整后，图片的白色背景会和容器的白色背景完全融合，不会再露出红色区域，达到类似亚马逊的展示效果。

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