html - 平板电脑上的背景图像无法调整(横向 View )

标签 html css html-table

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

我测试的表格具有以下宽度(在横向 View 中):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 - 我忘了提到在笔记本电脑屏幕截图上,实际图像是右调整的,左边是黑色背景。我的意思是,实际图像不是全屏显示。

更新: 伙计们,我已经尝试了你们建议的所有方法,但似乎没有任何效果像我想要的那样(笔记本电脑屏幕截图)

最佳答案

我只是将 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>

关于html - 平板电脑上的背景图像无法调整(横向 View ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55418042/

相关文章:

javascript - 使用 HTML、CSS、JS 的选项卡式表单

javascript - 如何在另一个javascript变量中使用图像url变量?

javascript - 使用 JQuery 通过单击不同表格中的按钮更改表格行背景颜色

javascript - jQuery slimScroll 总是从底部开始

html - CSS 背景边距顶部效果

javascript - Excel 和 IE7 - 防止 IE 打开 Excel 文件

html - 更新 css 自定义属性中的 alpha 值不起作用

javascript - 使用 JS 填充 HTML 表,其中数据顺序错误

jsp - 在jsp上为arraylist中的项目创建动态表

python - 将 html 表转换为 CSV 的脚本(最好是 python)