如何使用所见即所得的编辑器使图像忽略引导容器填充？

Question

我正在创建一个博客网站，并选择在我的博客创建中使用tinyMCE。当用户想要在移动设备上查看我的博客时，我希望使用编辑器插入每张图片/ gif文件，以忽略引导程序容器填充并使图像显示在屏幕的整个长度上，而不会有排水沟。我该如何实现？我尝试使用定位技巧，但无法弄清楚。由于某些原因，tinyMCE会插入p标签作为每个图像的父元素。

Here is my website to see what I'm referring too

以下是与该问题有关的CSS：

@media (min-width: 351px) and (max-width: 576px) {
    h2 {
        font-size: 4.6vh;
    }
    #blogImage {
        width: 100%;
        height: 20em;
        object-fit: cover;
        border-radius: 0px;
    }

    #blogBody img {
        width: 100%;
        /* object-fit: fill; */
        max-height: 100%;
        /* left: -20vw; */

    }

这是我的show.ejs路线

<div class="container mt-3" id="blogDetails">
        <div class="row">
            <div class="col-lg-6 d-flex flex-column justify-content-center">
                <h2 class="text-left text-primary"><%= blog.title %></h2>
                <p class="lead text-left mb-4 text-secondary"><em><%= blog.subtitle %></em></p>
                <div class="d-flex">
                    <div>
                        <img id="authorPic" src="/images/ryanweb.jpg" alt="Ryan" class="rounded">
                    </div>
                    <div class="ml-3" id="authorInfo">
                        <p class="authorInfo">By Ryan Talbert</p>
                        <p class="text-secondary"> <%= blog.created.toDateString() %></p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <img id="blogImage" src="<%= blog.image %>" alt="You will order from GiftGrab and love it!">
            </div>
        </div>
        <div class="row mt-3" id="blogBody">
            <div class="col-lg-8 offset-lg-2 mb-3">

                    <%- blog.body %>

            </div>
        </div>