html - Div 背景图像在笔记本电脑显示屏上重复，但在外接显示器上不重复

Question

我有一个带有背景图片的 div，我将其用作我网站上的英雄图片。在我的外接显示器上，它非常适合并正确显示。

当我将窗口拖到我的笔记本电脑显示器上时，背景图像移到了右边。我试过将背景大小设置为覆盖，但这只会使图像重复。

div 设置为图像的宽度和高度 (1920 x 600)，两个屏幕的分辨率都设置为 1920x1080。

是因为我的笔记本屏幕有更高的 dpi 吗？我应该更改什么以使图像在两个屏幕上正确显示？我需要不止一张图片吗？

编辑: 这是它在我的外接显示器上的样子(正确)

这是它在笔记本电脑上的样子(当我抓取屏幕时它实际上比原始图像尺寸大？)

这是我的 div CSS

.hero-image {
 background-color: #679da7;
 background-image: url("../images/hero-image.png");
 height: 600px;
 }

使用 background-size: contain/cover 没有帮助，它只会让图像在我的笔记本电脑屏幕上重复出现。

编辑 2: 乔的解决方案奏效了。经过更多的谷歌搜索后，似乎尽管我的笔记本电脑显示为 1920 x 1080，但实际上只有 1535 像素宽，这就是图像无法正确显示的原因(它比屏幕宽)-facepalm

谢谢大家的帮助。

Answer 1

你应该使用

background-size: cover;
background-repeat: no-repeat;

在你的背景图片上。