css - Why do images inserted in the post content via the_content() go off the max-width?

admin管理员组

文章数量:1122846

I have many containers over the said image itself such as col-md-10 which defines a max-width of 80% or so, this is how I generate my post:

<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">posted in
                        <a class="single-post-category" href="<?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');
?>

Specifically:

the_content();

Unfortunately, inserting an image results in this:

Setting .post-content { width: 100%; } fixes it, but given there are a lot of plugins out there and rules that can be over-written, this feels like a hack.

What am I missing, why is this happening?

I have many containers over the said image itself such as col-md-10 which defines a max-width of 80% or so, this is how I generate my post:

<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">posted in
                        <a class="single-post-category" href="<?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');
?>

Specifically:

the_content();

Unfortunately, inserting an image results in this:

Setting .post-content { width: 100%; } fixes it, but given there are a lot of plugins out there and rules that can be over-written, this feels like a hack.

What am I missing, why is this happening?

• images
• css
• the-content

Share Improve this question edited Jan 5, 2018 at 11:30 Johansson 15.4k1111 gold badges4343 silver badges7979 bronze badges asked Jan 5, 2018 at 10:56 Jonathan GuerinJonathan Guerin 35511 silver badge1414 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 0

The width property of the parent DIV element does not apply to it's children. An image within the .col-md-10 can overflow it's parent, and will be visible if the parent doesn't have the overflow:hidden property.

To fix this, you can set try and make the images responsive. Here's how to:

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

This will make sure your images don't go wider than their parent element.

Bootstrap also provides its own class for responsive images. The class name is .img-responsive, and you can pass it to your functions as an argument while outputting post thumbnails, for example:

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

Add this function to remove width and height attribute from wordpress wysiwyg when insert image to the editior.

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;
}

There is some CSS associated with the code outputted via the the wordpress WYSIWYG. I always include this code in my WordPress styles and allows this to be fixed and also means image alignment/captions etc work.

You can find the code and read more about it here: https://codex.wordpress.org/CSS#WordPress_Generated_Classes)

Here's the code for the skim readers out there

    /* =WordPress Core
    -------------------------------------------------------------- */
    .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%; /* Image does not overflow the content area */
        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;
    }

    /* Text meant only for screen readers. */
    .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; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
    }

    .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;
        /* Above WP toolbar. */
    }

Use the_post_thumbnail($size); where size is the predefined image sizes that you can set from the wp dashboard at settings - media.

The default image sizes are:

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

you can also define your custom image sizes in functions.php ex:

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

and then use it in in the template like:

the_post_thumbnail( 'my_custom_medium' );

true means that the image will be cropped to the exact size, wile without the image will be scaled down to match one of the max sizes.

in css you can also set the maximum width of the images to match the container's width by:

img {max-width: 100%;} - that`s globally for all images, or just the images you want like:

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

Edit: don't forget to regenerate the thumbnails after adding the custom sizes, other way you will have the new sizes only for the newly uploaded images.

本文标签： cssWhy do images inserted in the post content via thecontent() go off the maxwidth