'Visual Composer (WP bakery): stretch image that's smaller width than viewport

With Visual Composer(now WP Bakery), I have a banner image that's 1200px wide. The max width of the viewport is 1900px. I'm trying to set up a Row with a Single Image element that will stretch the image to the full 1900px width and preserve the same height dimension.

For my Row I have "stretch row and content (no padding)" selected. However, the single image element of 1200px wide is aligned to the left of the viewport so that when the display is 1900px wide, there's 700px of white space from the right of the image to the right border of the viewport. The image is not stretching.

Any ideas as to how to stretch the image and preserve the height? Or do I need to actually create a 1900px wide image?

csswordpressvisual-composer


Solution 1:[1]

I came across this answer while trying to solve the same question. I gave the row a css class of fullWidthImageRow and added the following to the 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;
}

works on current version of WPBakery

Solution 2:[2]

For the latest version, I've used:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 NAMS
Solution 2 Francisco Campos

Related Questions