【问题标题】:Background image does not adjust on tablet (landscape view)背景图像无法在平板电脑上调整(横向视图)
【发布时间】:2019-03-29 22:02:51
【问题描述】:

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

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

以下是我的主页在笔记本电脑屏幕上的显示效果:

以下是它在平板电脑上的样子:

谁能告诉我我错过了什么?

谢谢

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

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

【问题讨论】:

  • 试试url(https://test.me/images/bg-image-1-1920x1280.jpg) no-repeat fixed right top;,看看这是否是您想要的结果。
  • 你能添加你的html吗?
  • @Matt-the-Marxist, html 只是 <div class="page"> 它还有:.page { position: relative; min-height: 100vh!important; }
  • 你能把它放在一个sn-p里
  • 尝试添加溢出:隐藏;

标签: html css html-table


【解决方案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>

【讨论】:

  • 解释你做了什么。
  • @NimitShah 我只是更新了描述,我希望现在事情更清楚了。谢谢
  • @HassanSiddiqui,我已经尝试过您的分段,因为我的主页有第二部分(我可以向下滚动),所以无法访问第二部分。就像屏幕被锁定在主页的第一部分一样。这就是问题所在,但除此之外,主页的第一部分这样看起来不错
  • 您可以分享链接以获得更多说明吗?谢谢
  • 截图没有帮助,你有没有在任何服务器上部署你的代码?如果是,请分享链接。谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-29
  • 2014-03-14
  • 2013-01-14
  • 2013-01-11
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多