WPBakery 页面构建器拉伸图像全宽

Question

想知道是否有人可以帮助解决我遇到的这个问题。我继承了一个使用 wpbakery 页面构建器的网站。最初的开发人员使用了大量的 php 来构建页面，但我试图通过使用 wpbakery 重建一些页面来让客户端更容易使用。为了使网站在视觉上流畅，我想合并一些包含的背景图像。然而，这些图像的宽度只有 1440 像素，我希望它们能够在全屏上拉伸，无论窗口大小如何。如果我将行设置为“拉伸行和内容”（无填充）并将图像放在“单图像”附加组件中，则它仍然仅显示最大宽度为 1440 像素。尝试将其作为该行的背景图像，并且它变为全宽，但它没有完全缩小到屏幕尺寸。 （当屏幕小于 1440 px 时，在边界之外留下一些图像）尝试为单个图像提供一个类，并告诉自定义 CSS 编辑器中的类宽度为：100%，但这也不起作用。有人对如何实现这个有任何想法吗？

Answer 1

一种解决方案是创建一个空白行并使用自定义 CSS。我使用这个自定义 CSS 取得了成功：

.class {
  --imgw: 1534;
  --imgh: 458;
  width: 100vw;
  min-height: calc(100vw * var(--imgh) / var(--imgw));
  /* scales for the entire height of the image to always be shown */
  background-image: url(https://example.com/wp-content/uploads/image.jpg);
  background-size: cover;
}

要根据您的需求进行自定义，请输入图像的像素大小imgw和imgh（代表图像宽度和图像高度），然后使用最小高度计算以确保始终显示图像的整个高度。

我在 WPBakery 中创建了一个空白行，并将此自定义类添加到该行中。我的行拉伸设置为“拉伸行和内容（无填充）”。我还在“设计选项”选项卡中添加了 0px 填充和边距。

这对我有用。祝你好运！