如何在 Safari 上调整背景图片的大小？

Question

In Chrome

在Chrome中，效果如上图

In Safari

但是，在Safari中，它并没有如上图那样工作。

CSS代码如下：

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

我该如何解决？

Answer 1

背景大小：包含；

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

进行填充

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

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

背景大小：覆盖；

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

注意：使用此技术时，您需要知道如果屏幕比例与您的图像不同，图像可能会被浏览器剪切 （认为响应）。正如我在你的图片上看到的，里面有一些文字，所以封面解决方案可能不适合让它们可见。

When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

两种方案都不错，只是效果不同。这取决于您的行为偏好。即使在两种解决方案中都尊重图像比例，一种解决方案 clip/cut 而另一种解决方案会在图像周围创建一个空白。

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

Answer 2

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

我会考虑使用

background-size: cover;

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

如何在 Safari 上调整背景图片的大小？

How to resize background image on Safari?

html

css

safari

resize

image