Question

在 Chrome 中，它的工作方式如上图所示。

In Safari

但是，在Safari中，它无法正常工作。

CSS代码如下：

background-image: url(rendyhome.png);
background-size: auto 66vh;
background-repeat: no-repeat;
background-position: right;

我该如何解决？

Answer 1

background-size：contains;

您可以尝试使用以下代码告诉浏览器将图像保留在容器内，然后将其居中。此解决方案可能会在图像周围创建一个空白颜色，可以使用background color;

填充

background-size: contain;
background-position: center;

一个关键字，可以尽可能大地缩放图像并进行维护图像宽高比（图像不会被压扁）。图像是letterboxed 在容器内。当图像和容器有不同尺寸，空白区域（左/右上/下）是充满了背景色。

背景尺寸：封面;

您还可以使用background-size: cover;来完全填满您的图片。

注意：使用此技术，如果屏幕比例与图像不同，您需要知道图像可能被浏览器剪切（想想响应）。正如我在您的图像上看到的那样，内部有一些措辞，因此封面解决方案可能不适合让它们保持可见。

当图像和容器具有不同的尺寸时，图像就是剪切左/右或上/下。

两种解决方案都很好，但效果却不同。这取决于您的行为偏好。即使在两种解决方案中都遵守图像比例，一个解决方案剪辑/剪切，另一个在图像周围创建一个空白。

这是来自marcarea.com的图片，以便总结。你可以看到我之前描述的行为。

Answer 2

看这里： https://www.w3schools.com/cssref/css3_pr_background-size.asp

我会考虑使用

background-size: cover;

将背景图像缩放为尽可能大背景区域完全被背景图像覆盖。一些部分背景图像可能不在背景中定位区域