The easy solution for making images or other HTML elements full window width!
使图像或其他HTML元素全窗口宽度的简单解决方案!
Makes your Gutenberg Cover Image blocks ACTUALLY full window width!
使您的Gutenberg封面图片实际上占据整个窗口宽度! p>
Just apply the CSS class “fullwidth-element” to your existing HTML tags or Gutenberg Cover Image.
只需将CSS类“全宽元素”应用于现有的HTML标签或古腾堡封面图片。
EXAMPLE:
示例: p>
<
<< / p>
div class=”my-class fullwidth-element”>
div class =“ my-class fullwidth-element”>
or
要么
p>
Or, In your Gutenberg page, select the Cover Image block, and edit the Advanced settings, set Additional CSS Class to “fullwidth-element” and your Cover Image now does what you always expected it to.
或者,在您的Gutenberg页面中,选择Cover Image(封面图像)块,然后编辑Advanced(高级)设置,将Additional CSS Class(其他CSS类)设置为“ fullwidth-element”,然后Cover Image就可以实现您一直期望的功能。 p>
How it works: In the browser, window width and element size are calculated, and CSS “width” and “margin” values are applied to cause them to occupy the full width of the broswer window, no matter the size of the
工作原理:在浏览器中,计算窗口宽度和元素大小,并使用CSS“ width”和“ margin”值使它们占据浏览窗口的整个宽度,无论
parent container.
父容器。
This process is applied to any HTML element which has the class “fullwidth-element”.
此过程适用于所有具有“ fullwidth-element”类的HTML元素。 p>
FullWidth Element Sizer also sets a timer in the browser to watch for the window width to change, and will recalculate and re-apply full width values if it does.
FullWidth Element Sizer还在浏览器中设置了一个计时器,以监视窗口宽度的变化,如果发生变化,它将重新计算并重新应用全宽值。 p>