Почему изображения, вставленные в контент поста через the_content(), выходят за пределы максимальной ширины?

У меня много контейнеров вокруг указанного изображения, таких как col-md-10, который определяет max-width около 80%, вот как я генерирую свой пост:

<article id="single-post-<?php the_ID(); ?>" <?php post_class('single-post'); ?>>
    <?php
    $post_share = new Post_Share( array( 'facebook', 'twitter', 'gplus', 'pinterest' ), $post, $style="share-style-2" );
    echo $post_share->generate_share_links();
    ?>
    <header class="single-post-header">
        <div class="single-post-meta">
            <?php echo _s_show_post_info( array( 'author','time', 'category') ); ?>
        </div><!-- .post-meta -->

        <?php
        the_title( '<h1 class="single-post-title">','</h1>' );
        if ( has_category() ) : ?>
            <?php

            $categories = (array) wp_get_post_terms( get_the_ID(), 'category' );

            if ( !is_wp_error( $categories ) && !empty( $categories) ) { ?>
                <div class="single-post-secondary-meta">
                    <span class="single-post-category-span">опубликовано в
                        <a class="single-post-category" href="https://wordpress.stackexchange.com/questions/290225/<?php echo get_term_link( $categories[0] )?>"><?php echo $categories[0] -> name ?>
                        </a>
                    </span>
                </div><!-- .post-meta-2 -->
            <?php } ?>
        <?php endif; ?>
    </header><!-- .post-header -->  

    <?php if ( has_post_thumbnail() ) : ?>
        <div class="single-post-thumbnail">
            <a class="single-post-thumbnail-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php the_post_thumbnail(); ?>
            </a>
        </div><!-- .post-thimbnail -->
    <?php 
    endif; ?>

    <div class="single-post-content">
        <?php
            //echo wp_trim_words( get_the_content(), 40, '...' );
            the_content();
        ?>
    </div><!-- .post-content -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php 
get_template_part('template-parts/individual_post-related-posts');
?>

В частности:

the_content();

К сожалению, вставка изображения приводит к следующему:

Установка .post-content { width: 100%; } решает проблему, но учитывая, что существует множество плагинов и правил, которые могут быть переопределены, это кажется временным решением.

Что я упускаю, почему это происходит?

Свойство width родительского элемента DIV не применяется к его дочерним элементам. Изображение внутри .col-md-10 может переполнять своего родителя и будет видно, если родитель не имеет свойства overflow:hidden.

Чтобы это исправить, вы можете попробовать сделать изображения адаптивными. Вот как:

.single-post img {
    max-width: 100%;
    height: auto;
    display:block;
}

Это гарантирует, что ваши изображения не будут шире их родительского элемента.

Bootstrap также предоставляет свой собственный класс для адаптивных изображений. Имя класса – .img-responsive, и вы можете передать его своим функциям в качестве аргумента при выводе миниатюр постов, например:

the_post_thumbnail( 'thumbnail', [ 'class' => 'img-responsive' ] );

Добавьте эту функцию, чтобы удалить атрибут ширины и высоты из редактора WYSIWYG WordPress при вставке изображения.

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
  $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
  return $html;
}

Существует некоторый CSS, связанный с кодом, выводимым через WYSIWYG WordPress. Я всегда включаю этот код в свои стили WordPress, и это позволяет исправить проблему, а также обеспечивает правильное выравнивание изображений/подписей и т. д.

Вы можете найти код и прочитать о нем здесь: https://codex.wordpress.org/CSS#WordPress_Generated_Classes)

Вот код для тех, кто быстро просматривает:

    /* =Ядро WordPress
    -------------------------------------------------------------- */
    .alignnone {
        margin: 5px 20px 20px 0;
    }

    .aligncenter,
    div.aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }

    .alignright {
        float:right;
        margin: 5px 0 20px 20px;
    }

    .alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }

    a img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
    }

    a img.alignnone {
        margin: 5px 20px 20px 0;
    }

    a img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }

    a img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .wp-caption {
        background: #fff;
        border: 1px solid #f0f0f0;
        max-width: 96%; /* Изображение не переполняет область контента */
        padding: 5px 3px 10px;
        text-align: center;
    }

    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }

    .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }

    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }

    /* Текст предназначен только для экранных считывателей. */
    .screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important; /* Многие комбинации экранных считывателей и браузеров объявляют сломанные слова так, как они визуально появляются. */
    }

    .screen-reader-text:focus {
        background-color: #eee;
        clip: auto !important;
        clip-path: none;
        color: #444;
        display: block;
        font-size: 1em;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
        /* Над панелью инструментов WP. */
    }

Используйте the_post_thumbnail($size);, где размер – это предустановленные размеры изображений, которые вы можете настроить в панели управления wp в настройках – медиа.

Предустановленные размеры изображений:

the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'medium' );
the_post_thumbnail( 'medium_large' );
the_post_thumbnail( 'large' );
the_post_thumbnail( 'full' );

вы также можете определить свои собственные размеры изображений в functions.php, например:

add_image_size( 'my_custom_small', 245, 165, true );
add_image_size( 'my_custom_medium', 600, 400 );

и затем использовать их в шаблоне, как:

the_post_thumbnail( 'my_custom_medium' );

true означает, что изображение будет обрезано до точного размера, в то время как без него изображение будет уменьшено, чтобы соответствовать одному из максимальных размеров.

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

img {max-width: 100%;} – это глобально для всех изображений, или только для тех изображений, которые вы хотите, например:

.post-content img {max-width: 100%;}

Дополнение: не забывайте регенерировать миниатюры после добавления пользовательских размеров, иначе у вас будут новые размеры только для вновь загруженных изображений.