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：contains / cover没有帮助，它只是让我的笔记本电脑屏幕上的图像重复。

编辑2： 乔的解决方案奏效了。经过一番谷歌搜索似乎尽管我的笔记本电脑显示器说它是1920 x 1080，但它实际上只有1535px宽，这就是为什么图像显示不正确（它比屏幕更宽） - facepalm

感谢帮助人员。

Answer 1

你应该使用

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

在你的背景图片上。

Answer 2

显示器和笔记本电脑的分辨率是多少？

Answer 3

你可以使用

background-size : 100% 100%;
background-repeat: no-repeat;

你的div背景上的

Answer 4

使用CSS3的背景大小，以便图像始终适合任何容器而不会被拉伸。

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: no-repeat;

在使用背景大小属性时，请确保设置背景图像属性，如下所示：

background-image: url('path/to/img');

而不是

background: url('path/to/img');

Answer 5

根据想要的结果（不清楚），您可以采取两种方式。

1）这将使图像保持在div内，如果高度高于div，它会在那里留下一个空白区域，使用背景颜色来看它更清晰

background-size: contain; 
background-repeat: no-repeat;

2）这将始终覆盖div的整个宽度和高度

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

Answer 6

您需要设置位置并重复规则：

background-position: right;
background-repeat: no-repeat;

Answer 7

Joe对我的问题的评论奏效了。我还发现我的笔记本电脑屏幕只有1535宽，尽管分辨率为1920.

谢谢大家。