Angular背景图片：浏览器宽度变化时保持居中显示

问题出在你用[style.background]设置背景图时用了简写属性，直接覆盖了CSS里定义的background-position、background-repeat等配置，导致图片没法居中。

改法很简单：

1. 把模板里的[style.background]换成[style.background-image]，只单独设置背景图的URL，这样CSS里的其他背景属性就能正常生效。
2. 给容器加上响应式宽度，让它跟随浏览器窗口宽度变化。

修改后的HTML代码： #

<div
  [style.background-image]="'url(https://upload.wikimedia.org/wikipedia/commons/b/b6/Santorin_%28GR%29%2C_Exomytis%2C_Vlychada_Beach_--_2017_--_2999_%28bw%29.jpg)'"
  class="home-custom-image"
></div>

修改后的CSS代码： #

.home-custom-image {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin: 5px;
  margin-top: 10px;
  border-radius: 8px;
  height: 469px;
  /* 让容器宽度随窗口自适应 */
  width: 100%;
  max-width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

关键属性说明：

• background-size: cover：背景图按比例缩放，完全填满容器，超出部分自动裁剪。
• background-position: center center：背景图始终以中心对齐，裁剪时保留中间主体区域。
• width: 100%：容器宽度跟随父元素（浏览器窗口）自适应变化，保证响应式效果。

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