Targeting content image for responsive sizing - php

Question

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
<?php get_template_part( 'content', 'single' ); ?>
This pulls from content-single.php which has the code for my posts
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.
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(); ?>

Answer 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.
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):
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));
See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for more details.
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):
<script type="text/javascript">
jQuery(function() {
jQuery(img).addClass('img-responsive');
});
</script>
The last option I can think of, is by using pure CSS:
.content img { height: auto; max-width: 100%; }
Where .content is the area that contains your post content.
Note: You may also want to override the .wp-caption class as well like so.
.wp-caption { width: auto !important; }