Ho can I make my top two images under header responsive?

I am working on the website for my church and I am about finished. I have noticed that when checking the site on my phone that it is all responsive except for the two images that I inserted into the home.php file. I am a noob and couldn’t figure out how to enter the text I wanted under the header so I made images out of the text and inserted it into the php file. “Infinite House Of Praise / “Where The Church Of God Feels Like Home” are actually two separate images. I’m sure there was a better way to do it, but now that it’s done, is there a simple way to make them both responsive? I thank you in advance for any help!

Here is a link to the site:
https://www.ihopchurch.org/

Here is the code with the images:

<?php get_header(); ?> 

			<div id="content" class="clearfix">
				<?php if(of_get_option('sc_blurbhome') == '1') { ?>
				<!-- begin .blurb -->
				<div class="container">
					<div class="intro-page">
						<div style="text-align:center;"><img src="<?php echo get_template_directory_uri(); ?>/library/images/sampleimages/infinite.jpg" alt="<?php the_title(); ?>" width="auto"  class="portfolio-img" /></div>

						<div style="text-align:center;"><img src="<?php echo get_template_directory_uri(); ?>/library/images/sampleimages/home.jpg" alt="<?php the_title(); ?>" width="auto"  class="portfolio-img" /></div>
						<?php if(!of_get_option('sc_blurb') == '')  { ?>
						<h2><?php echo of_get_option('sc_blurb') ?></h2>
						<?php }?>
					</div>
				</div>
				<!-- end .blurb -->
				<?php } ?>

Thanks again!