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

Posted 2023-03-06

【中文标题】如何在 Safari 上调整背景图像的大小？

【英文标题】：How to resize background image on Safari?

【发布时间】：2017-12-13 02:47:01

【问题描述】：

In Chrome

在 Chrome 中，它的工作原理与上图相同。In Safari 但是，在 Safari 中，它不能如上所示。

CSS代码如下：

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

我该如何解决？

【参考方案1】：

背景尺寸：包含； 您可以尝试使用以下代码告诉浏览器将图像保留在容器内，然后将其居中。此解决方案可能会在图像周围创建可以使用background color 填充的空白颜色；

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

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

一个尽可能大地缩放图像并保持 图像纵横比（图像不会被压扁）。图像是信箱的 容器内。当图像和容器不同时 尺寸，空白区域（左/右的顶部/底部）是 填充背景色。

背景尺寸：封面； 您还可以使用background-size: cover;，它将用您的图像完全填满屏幕。 小心：使用此技术，如果屏幕比例与您的图像不同，您需要知道图像可能会被浏览器剪切（认为是响应式的）。正如我在您的图片中看到的那样，里面有一些文字，因此封面解决方案可能不适合保持它们可见。

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

两种解决方案都不错，但效果不同。这取决于您的行为偏好。即使两种解决方案都遵循图像比例，一个解决方案剪辑/剪切，另一个解决方案会在图像周围创建空白。 这是来自 marcarea.com 的图片，以便进行总结。你可以看到我之前描述的行为。

【参考方案2】：

看这里： https://www.w3schools.com/cs-s-ref/css3_pr_background-size.asp

我会考虑使用

background-size: cover;

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