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

I am using 'Aqua Resizer' (aq_resizer.php) to resize my thumbnails on my Wordpress site. My posts are made from a loop in single.php with

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

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

This pulls from content-single.php which has the code for my posts

这来自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 -->

Everything works fine (the resizer function works on the featured post which is brought in with <?php the_content(); ?>. The image scales up/down as the window resizes

一切正常(缩放器功能适用于带有的特色帖子。当窗口调整大小时,图像会向上/向下缩放

The effect works because class="img-responsive" is applied to the featured-image of the post.

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

I have images in the content of the post. I want them to act the same way (right now they are just brought in at their original size) I need the class img-responsive to be applied to the images in <?php the_content(); ?>

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

1 个解决方案

#1

Applying the CSS classes to images can be done from within the post itself, just edit the image and put CSS class img-responsive.

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

If you cannot edit/modify posts (or it is just too much work) then second option is to write a small code snippet in your theme's custom function.php file (this is true only when you display post in your loop):

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

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

See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for more details.

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

And the third option is to use jQuery in your header.php file, this way all images on page will get responsive class (however this may not be what you want, especially if you have backgrounds, logos, menu images, etc. and it will require JavaScript to be enabled in client's browser):

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

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

The last option I can think of, is by using pure CSS:

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

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

Where .content is the area that contains your post content.

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

Note: You may also want to override the .wp-caption class as well like so.

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

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

#1