在 Chrome 中，它的工作原理与上图相同。
In Safari
但是，在 Safari 中，它不能如上所示。
CSS代码如下：
background-image: url(rendyhome.png);
background-size: auto 66vh;
background-repeat: no-repeat;
background-position: right;
我该如何解决？
【问题讨论】：
标签： html css image safari resize
背景尺寸：包含；
您可以尝试使用以下代码告诉浏览器将图像保留在容器内，然后将其居中。此解决方案可能会在图像周围创建可以使用background color 填充的空白颜色；
background-size: contain;
background-position: center;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
一个尽可能大地缩放图像并保持 图像纵横比（图像不会被压扁）。图像是信箱的 容器内。当图像和容器不同时 尺寸，空白区域（左/右的顶部/底部）是 填充背景色。
背景尺寸：封面；
您还可以使用background-size: cover;，它将用您的图像完全填满屏幕。
小心：使用此技术，如果屏幕比例与您的图像不同，您需要知道图像可能会被浏览器剪切（认为是响应式的）。正如我在您的图片中看到的那样，里面有一些文字，因此封面解决方案可能不适合保持它们可见。
当图像和容器的尺寸不同时，图像是 剪裁左/右或上/下。
两种解决方案都不错，但效果不同。这取决于您的行为偏好。即使两种解决方案都遵循图像比例，一个解决方案剪辑/剪切，另一个解决方案会在图像周围创建空白。
这是来自 marcarea.com 的图片，以便进行总结。你可以看到我之前描述的行为。
【讨论】：
看这里： https://www.w3schools.com/cssref/css3_pr_background-size.asp
我会考虑使用
background-size: cover;
将背景图像缩放到尽可能大，以便 背景区域完全被背景图像覆盖。一些 背景图像的某些部分可能不在背景中显示 定位区域
【讨论】：