针对响应式大小调整内容图像

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(); ?> 中的图像

Answer 1

可以在帖子本身中将 CSS 类应用于图像，只需编辑图像并输入 CSS 类 img-responsive。

如果您无法编辑/修改帖子（或者工作量太大），那么第二个选择是在主题的自定义 function.php 文件中编写一个小代码 sn-p（仅当您在您的循环）：

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

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

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

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