使用 HTML 和 CSS 在 Wordpress 中将图像（不是背景）拉伸到整个浏览器宽度

Question

我正在尝试将 GIF 显示为全浏览器大小，但我希望它位于菜单 (site-header div) 下方和页脚上方。为了做到这一点，我隐藏了 page-header div 并卡在一个小容器中。 `

<div id="content" class="site-content"><div class="page-header"><div class="container"><h1 class="entry-title">Kampania</h1></div></div><div id="content-inside" class="container no-sidebar"><div id="primary" class="content-area"><main id="main" class="site-main" role="main"><article id="post-1259" class="post-1259 page type-page status-publish hentry"><header class="entry-header"></header><div class="entry-content"><p><img src="https://shop.sin.org.pl/wp-content/uploads/2017/03/gif.gif" id="selector"></p></div></article></main></div></div></div>

div"content-area"里面装的是什么我要搬到"site-content"div。我该如何实现？

https://shop.sin.org.pl/pl/kampania/

谢谢！

Answer 1

您是否尝试过将页面模板设置为 100% 宽度？

如果这不起作用，您可以手动将页面宽度设置为 100%；

#content-inside {
    width:100%;
    max-width:inherit !important;
    padding:0 !important;
}

Answer 2

尝试添加这个CSS:

#content-inside {
   max-width: 100%!important;
   padding: 0px!important;
}

使用 HTML 和 CSS 在 Wordpress 中将图像（不是背景）拉伸到整个浏览器宽度

Stretch image (not background) to full browser width in Wordpress with HTML and CSS

html

css

wordpress

stretch