如何强制必须在 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;
}