平板电脑不支持背景图像(横向视图)

问题描述 投票:0回答:1

我在平板电脑上遇到了我的主页背景(图片)的这个错误/问题。在笔记本电脑屏幕或更大的屏幕上一切都很好在移动设备上也很好。但是当从平板电脑加载网站时,我的背景看起来很奇怪。图像就像整个主页一样。在图像的左侧,右侧,顶部和底部,显示了这个空的空间。就我而言,他们是黑人。

我正在测试的表格具有以下宽度(在横向视图中):1112px,1280px。

这是背景的CSS:

element.style {
    margin: 0 auto;
    background: url(https://test.me/images/bg-image-1-1920x1280.jpg) no- 
    repeat fixed right;
    background-size: contain;
}

以下是我的主页在笔记本电脑屏幕上的样子:img

以下是平板电脑风景的样子:img2

有人能告诉我我错过了什么吗?

谢谢

PS - 我忘记在笔记本电脑屏幕截图中提到,实际图像是正确调整的,左边是黑色背景。我的意思是,实际图像不是全屏。

更新:我已经尝试过你们所有人提出的建议,但似乎并没有像我想的那样工作(笔记本电脑截图)

html css html5 css3 html-table
1个回答
-1
投票

我只是将background-position **fixed right**改为**center center**并将background-size: contain改为background-size: cover,我希望它能帮到你。谢谢

.bg {
  background: url(https://images4.alphacoders.com/279/279526.jpg) no-repeat center center;
  margin: 0 auto;
  background-size: cover;
  height: 100vh;
  width: 100%;
}
<div class="bg"></div>
© www.soinside.com 2019 - 2024. All rights reserved.