时间戳

首页 > 解决方案 > 背景图像无法在平板电脑上调整（横向视图）

html - 背景图像无法在平板电脑上调整（横向视图）

问题描述

我在平板电脑上的主页背景（图像）遇到了这个错误/问题。在笔记本电脑屏幕或更大的屏幕上一切都很好。在移动设备上也很好。但是当谈到从平板电脑加载网站时，我的背景看起来很奇怪。图像就像以整个主页为中心。在图像的左侧、右侧、顶部和底部显示了这个空白区域。就我而言，它们是黑色的。

我正在测试的表格具有以下宽度（在横向视图中）：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;
}

这是我的主页在笔记本电脑屏幕上的显示效果： 图像

以下是它在平板电脑上的样子： 图像2

有人可以告诉我我错过了什么吗？

谢谢

PS - 我忘了提到，在笔记本电脑屏幕截图上，实际图像是右侧调整的，左侧是黑色背景。我的意思是，实际图像不是全屏显示。

更新：我已经尝试了你们建议的一切，但似乎没有什么能像我想要的那样工作（笔记本电脑屏幕截图）

标签： htmlcsshtml-table

解决方案

我只是更改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>

推荐阅读