定位内容图像以进行响应大小调整

Question

我正在使用'Aqua Resizer'（aq_resizer.php）来调整Wordpress网站上的缩略图大小。 我的帖子是用single.php的循环制作的

<?php get_template_part( 'content', 'single' ); ?>

这来自content-single.php ，它包含我帖子的代码

HTML

<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >

    <div>
        <h2><?php the_title(); ?></h2>
        <h3><?php the_category(', '); ?></h3>
        <?php the_content(); ?>
    </div>  

    <?php
        $thumb = get_post_thumbnail_id();
        $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
        $image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
    ?>

    <?php if($image) : ?>
    <img class="img-responsive" src="<?php echo $image ?>"/>
    <?php endif; ?> 

</div><!-- /#post -->

一切正常（缩放器功能适用于带有<?php the_content(); ?>的特色帖子。当窗口调整大小时，图像会向上/向下缩放

该效果有效，因为class="img-responsive"应用于帖子的特色图像。

我在帖子的内容中有图像。 我希望它们以相同的方式运行（现在它们只是以原始大小引入）我需要将类img-responsive应用于<?php the_content(); ?> <?php the_content(); ?>

Answer 1

将CSS类应用于图像可以在帖子本身内完成，只需编辑图像并将CSS类设置为img-responsive 。

如果您无法编辑/修改帖子（或者它的工作量太大），那么第二个选项是在主题的自定义function.php文件中编写一个小代码片段（仅当您在循环中显示post时才会这样）：

<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

有关详细信息，请参阅https://codex.wordpress.org/Function_Reference/the_post_thumbnail 。

第三个选项是在header.php文件中使用jQuery，这样页面上的所有图像都会得到响应类（但这可能不是你想要的，特别是如果你有背景，徽标，菜单图像等等）将需要在客户端的浏览器中启用JavaScript）：

<script type="text/javascript">
jQuery(function() {
  jQuery(img).addClass('img-responsive');
});
</script>

我能想到的最后一个选项是使用纯CSS：

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

where .content是包含您的帖子内容的区域。

注意：您可能还想覆盖.wp-caption类，就像这样。

.wp-caption { width: auto !important; }