WP Bakery（原Visual Composer）：如何将1200px图片拉伸至1900px视口全屏？

我来帮你搞定这个WP Bakery里图片不能全屏的问题！你遇到的情况很常见——Row已经选了「stretch row and content (no padding)」，但1200px的Single Image还是左对齐，右侧留空白，核心原因是Single Image元素本身的尺寸限制没跟上Row的拉伸设置，试试下面几个方法：

方法一：直接调整Single Image元素的参数 #

• 编辑你的Single Image元素，找到「Image Size」选项：
  • 不要选预设的1200px固定尺寸，改成「Full Size」（调用图片原始尺寸），或者选择「Custom」，然后把宽度设为100%，高度保持「Auto」（这样能保留图片原比例）。
  • 部分WP Bakery版本里有「Stretch Image」的复选框，直接勾选它，就能强制图片填满所在的容器空间。

方法二：用自定义CSS强制覆盖样式 #

如果上面的设置没生效，大概率是WP Bakery的内联样式优先级更高，我们可以加自定义CSS来突破限制：

1. 给目标Row添加一个自定义CSS类：编辑Row，找到「Extra CSS Class」输入框，填入full-width-banner-row（这个类名可以自定义，只要好记就行）。
2. 进入主题的「自定义」→「额外CSS」，或者WP Bakery的自定义CSS面板，添加以下代码：

   .full-width-banner-row .vc_single_image-img {
       width: 100% !important;
       max-width: 100% !important;
       height: auto !important;
       /* 如果你想让图片严格保留原高度，把上面的height: auto改成下面这行，替换成你图片的实际高度数值 */
       /* height: 400px !important; */
       /* 如果你想保持比例同时填满容器，避免留白，加上这行 */
       object-fit: cover;
   }
   

   解释：!important用来覆盖WP Bakery默认的内联样式，object-fit: cover能让图片按比例拉伸填满容器，不会变形；如果必须保留原高度，就替换成固定高度值，但注意在小屏幕上可能会出现拉伸变形。

方法三：检查Row的嵌套与主题限制 #

• 确认这个横幅Row没有被嵌套在其他限制宽度的容器里（比如父级Row是固定宽度，或者主题自带的container容器），如果是嵌套的，把它移到页面最外层，或者给父级容器也设置「stretch row」选项。
• 有些主题会默认给页面内容设置最大宽度（比如1200px），去主题的自定义设置里找「布局」→「内容宽度」，把横幅所在页面的内容宽度限制取消，或者设为100%。

内容的提问来源于stack exchange，提问作者Tass Times