为什么通过_content()插入到POST内容中的图像会偏离最大宽度？

时间：2018-01-05 作者：Jonathan Guerin

我在上述图像上有许多容器，例如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">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\');
?>

具体而言：

the_content();

不幸的是，插入图像会导致以下情况：

背景.post-content { width: 100%; } 修复了它，但考虑到有很多插件和规则可以重写，这感觉像是一次黑客攻击。

我错过了什么，为什么会这样？

4 个回复

SO网友:Johansson

这个width 父DIV元素的属性不适用于其子元素。中的图像.col-md-10 可以溢出其父级，如果父级没有overflow:hidden 所有物

要解决此问题，可以设置try并使图像响应。以下是如何：

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

这将确保图像的宽度不会超过其父元素的宽度。

Bootstrap还为响应图像提供了自己的类。类名为.img-responsive, 您可以在输出post缩略图时将其作为参数传递给函数，例如：

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

SO网友:hatfim

添加此函数可在将图像插入编辑器时从wordpress wysiwyg中删除宽度和高度属性。

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

SO网友:Harry Francis

有一些CSS与通过wordpress WYSIWYG输出的代码相关联。我总是在我的WordPress样式中包含此代码，并允许对此进行修复，还意味着图像对齐/字幕等工作。

您可以在此处找到代码并阅读更多信息：https://codex.wordpress.org/CSS#WordPress_Generated_Classes)

下面是skim阅读器的代码

    /* =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. */
    }

SO网友:Botond Vajna

使用the_post_thumbnail($size); 其中size是预定义的图像大小，您可以从wp仪表板的settings-media中进行设置。

默认图像大小为：

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 意味着图像将被裁剪到精确的大小，没有图像的wile将被缩小以匹配最大大小之一。

在css中，您还可以通过以下方式设置图像的最大宽度以匹配容器的宽度：

img {max-width: 100%;} - 这适用于所有图像，或仅适用于您想要的图像，如：

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

编辑：添加自定义尺寸后，不要忘记重新生成缩略图，否则您将仅为新上载的图像生成新尺寸。

结束

小码农CODE

为什么通过_content()插入到POST内容中的图像会偏离最大宽度？

相关推荐

style.min.css code issue