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

【问题标题】：Div Background Image repeating on laptop display but not on external monitorDiv 背景图像在笔记本电脑显示屏上重复，但在外接显示器上不重复
【发布时间】：2017-09-08 10:16:52
【问题描述】：

我有一个带有背景图像的 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，但它实际上只有 1535 像素宽，这就是图像无法正确显示的原因（它比屏幕宽） - facepalm

感谢各位的帮助。

【问题讨论】：

你能提供你的css吗？
我已经为 hero-image div 添加了我的 CSS。
我明白了，你可能只需要像background-position: right; background-repeat: no-repeat;这样的东西
成功了！谢谢乔。谷歌搜索了一下，我的笔记本电脑显示屏似乎只有 1535 像素宽，尽管它说分辨率是 1920 x 1080。这就是为什么图像被向右推，它溢出了 div。

标签： html css

【解决方案1】：

你应该使用

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

在您的背景图像上。

【讨论】：

【解决方案2】：

需要设置位置和重复规则：

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

【讨论】：

【解决方案3】：

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

【讨论】：

两者均为 1920x1080。我怀疑可能是笔记本电脑屏幕的 dpi 较高，这就是导致问题的原因？
是的！为背景图像设置不重复应该可以工作。

【解决方案4】：

你可以使用

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

在你的 div 背景上

【讨论】：

它会拉伸图像

【解决方案5】：

使用 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');

【讨论】：

【解决方案6】：

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

1）这将使图像保持在div内，如果高度比div高，它会在那里留下一个空白空间，使用背景色更清楚

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

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

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

【讨论】：

【解决方案7】：

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

谢谢大家。

【讨论】：