css - Visual Composer(WP 面包店): stretch image that's smaller width than viewport

Question

使用 Visual Composer(现在是 WP Bakery)，我有一个 1200 像素宽的横幅图片。视口(viewport)的最大宽度为 1900 像素。我正在尝试设置一个带有单个图像元素的行，该元素会将图像拉伸(stretch)到完整的 1900 像素宽度并保持相同的高度尺寸。

对于我的行，我选择了“拉伸(stretch)行和内容(无填充)”。但是，1200 像素宽的单个图像元素与视口(viewport)左侧对齐，因此当显示宽度为 1900 像素时，从图像右侧到视口(viewport)右边界有 700 像素的空白区域。图片没有拉伸(stretch)。

关于如何拉伸(stretch)图像和保持高度的任何想法？或者我是否需要实际创建一个 1900 像素宽的图像？

Answer 1

我在尝试解决同一个问题时遇到了这个答案。我给该行一个 fullWidthImageRow 的 css 类，并将以下内容添加到 theme.css

div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure {
    width: 100% !important;
}
div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure > div {
    width: 100% !important;
}
div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure > div > img {
    width: 100% !important;
}

适用于当前版本的 WPBakery