gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:13:04 24 4
gpt4 key购买 nike

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

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

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

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

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

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

enter image description here

这是我的 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

谢谢大家的帮助。

最佳答案

你应该使用

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

在你的背景图片上。

关于html - Div 背景图像在笔记本电脑显示屏上重复,但在外接显示器上不重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46114138/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com