Как заставить изображение быть полноэкранным, которое должно быть в контейнере Bootstrap 4?

Question

Я использую шаблон страницы Wordpress, где у меня есть содержимое родительского шаблона, а затем под ним я отображаю содержимое дочерних шаблонов, которое включает в себя рекомендуемое изображение.Контент должен отображаться в классе container, но показанные изображения должны быть в полноэкранном режиме.Проблема в том, что я не могу отделить код, чтобы сделать это возможным.Я даже не уверен, возможно ли это.Может быть, это через JQuery?Изображение, которое я хочу отображать в полноэкранном режиме, находится в цикле foreach в нижней части кода ниже.

Вот примерный пример моего кода:

<div class="<?php echo esc_attr( $container ); ?>" id="content">

        <div class="row">

            <div class="col-md-12 content-area" id="primary">

                <main class="site-main" id="main" role="main">

                    <?php

                    $parent_id = get_the_ID();

                    $args = array(
                        'post_type' => 'page',
                        'post_parent' => $parent_id,
                        'order' => 'ASC',
                        'orderby' => 'menu_order',
                        'posts_per_page' => -1
                    );

                    $rooms = get_posts($args);

                    ?>

                    <?php while ( have_posts() ) : the_post(); ?>

                        <?php get_template_part( 'loop-templates/content', 'page' ); ?>

                        <?php
                        // If comments are open or we have at least one comment, load up the comment template.
                        if ( comments_open() || get_comments_number() ) :
                            comments_template();
                        endif;
                        ?>


                    <?php endwhile; // end of the loop. ?>


                    <?php foreach ( $rooms as $room ) : ?>

                        <!-- THIS BELOW IS THE PROBLEM -->

                        <div class="acc-bg" style="background-image: url('<?php  echo get_the_post_thumbnail_url($room->ID);?>')"></div>

                        <div data-spy="scroll" data-target="#accommodation-navbar" data-offset="0">
                          <h1 id="<?php echo $room->ID; ?>"><?php echo $room->post_title; ?></h1>
                          <?php echo apply_filters( 'the_content', $room->post_content ); ?>
                          <p><?php echo get_post_meta($room->ID, "fireplace", true); ?></p>
                        </div>


                    <?php endforeach; ?>


                </main><!-- #main -->

            </div><!-- #primary -->

        </div><!-- .row end -->

    </div><!-- #content -->

Answer 1

Пока ваше изображение находится в DOM, оно будет занимать позицию из родительского элемента.

Чтобы включить полноэкранный режим на вашем изображении, вы можете использовать этот трюк css:

.acc-bg {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}