css - 在 Elementor 部分中适合背景图像
问题描述
据我所知，这是超级流行和常见的问题，但我尝试过的所有解决方案最终都失败了。
我有一个测试网站：https ://mojastrona.hekko.pl/baltyk-stroma-glowna/
而我无法实现的是使背景图像适合任何分辨率。
这是我对 elementor 部分的设置：
但这并不能提供完美的图像拟合。它正在被切割。我尝试将一些解决方案添加到我在 Internet 上找到的 .css 文件中，但它们都不起作用。
解决方案
您尝试做的事情几乎是不可能的（在合理范围内）。
假设您的图像尺寸为 4:3。现在，如果有人在 16:9 显示器上查看您的网站会发生什么？容器（以及图像）必须在上下或左右有一些空白区域。
有几种可靠的选择可以得到你想要的：
定位您的图像，以便始终存在最重要的动机部分（例如，“中心顶部”，以便图像顶部的文本始终可见
向父容器添加“最小高度” - 该部分将是显而易见的选择。使用 VH/%-units 可能会给你一个更可靠的结果
将您的图像作为简单的图像小部件而不是背景图像。将宽度设置为 100%。确保您的部分设置为“全宽/无间隙”。您的图像现在将始终是屏幕的整个宽度，而不会被父容器缩小。
显然#3 有几个限制，因为将内容放在图像顶部变得更加困难。