在macs切断的背景图象

Question

目前，我有一个样机网站www.hush.technology 在我的Windows（17英寸）电脑上，网站背景是全屏的 但在我的Mac（13英寸）上，图片的宽度在右侧被切断。我一般都喜欢自己解决问题，但我无法弄清楚。 我的css看起来像这样

// CSS CODE
.bgimage { 
    background: url(image url);
    background-size: cover;
    width: auto;
    height: 720px;
}

有谁知道为什么会这样。我想要一个解释。

Answer 1

来自here

背景尺寸：盖

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

我认为宽高比是关闭的，它是剪切图像的一部分。

Answer 2

我会尝试在这两个答案所说的基础上再接再厉。但我会简单地告诉你：没有办法解决你想要实现的目标，因为这是不可能的。原因如下：

左边的第一个框显示了您拥有的全屏浏览器 - 您的图像背景完美地覆盖了您想要的屏幕。 您的屏幕尺寸与背景相同，并保持图像比率。

中间的方框显示了当您调整浏览器大小时会发生什么（或者在您的13英寸Mac上查看，我认为这是一个较低的分辨率）。图像左右切断！但为什么？图像正在按照它所说的去做：保持它的比例并覆盖整个屏幕。它们都必须得到满足，而背景图像并不关心它本身是否都不可见 - 它只关心屏幕是被覆盖，比例相同。

最后一个框（右边一个）是user3739658的答案的实现。你已经告诉你希望它的图像完全可见，并保持比例。结果是：它不能再覆盖整个屏幕了。

您的背景图片只能保证在任何给定时间执行三个中的两个。

• 覆盖屏幕
• 保持比例
• 显示整个图片

我可以展示的另一个面板是被告知的图像：覆盖屏幕并显示整个图像，这将导致图像以某种方式拉伸。

解决方案

最简单的方法是删除静态height: 720px;，这意味着div现在可以根据浏览器的宽度调整大小（以保持背景图像的比例）。

另一种方法是改变背景的目的 - 你的形象主要由三件事组成：

• 右边的实际图片
• 左上角的一些较大的文字
• 大量背景色

您可以将背景分割为右侧的图片和左侧的文字，而您的background现在只是一种颜色。这样做的好处是图像将始终显示在屏幕右侧，并且您的文本将始终显示（现在不再是图片）。文本和图片都不会偏斜，因为被调整大小的属性是background color的宽度：这不重要，因为它只是一个颜色填充。

Answer 3

检查此链接;

Perfect Full Page Background Image

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

祝你好运！