在 Elementor 部分中适合背景图像

Question

据我所知，这是一个超级流行和常见的问题，但我尝试过的所有解决方案最终都失败了。

我有一个测试网站：https://mojastrona.hekko.pl/baltyk-strona-glowna/

而我无法做到的是让背景图片适合任何分辨率。

这是我对 elementor 部分的设置：

但这并不能提供完美的图像拟合。它正在被切割。我尝试将一些解决方案添加到 .css 文件中，我在 Internet 上找到了这些解决方案，但它们都不起作用。

Answer 1

您尝试做的事情几乎是不可能的（在合理范围内）。

假设您的图片尺寸为 4:3。现在，如果有人在 16:9 显示器上查看您的网站会发生什么？容器（以及图像）必须在上下或左右有一些空白区域。

有几种可靠的选择可以得到你想要的：

1. 定位您的图片，以便始终呈现最重要的动机部分（例如，“居中”，以便始终可见图片顶部的文字

2. 向父容器添加“最小高度” - 该部分将是显而易见的选择。使用 VH/%-units 可能会给你一个更可靠的结果

3. 将您的图片放置为简单的图片小部件，而不是背景图片。将宽度设置为 100%。确保您的部分设置为“全宽/无间隙”。您的图像现在将始终是屏幕的整个宽度，而不会被父容器缩小。

显然，#3 有几个限制，因为将内容放在图像顶部变得更加困难。