how to resize image thumbnails without stretching - wordpress

Question

I currently have a blog page in Wordpress where my original images are all different sizes. I am having trouble getting the image thumbnails on my blog home page to all be the same width and height without stretching the image and also being able to remain responsive when resizing the screen.
Current blog page can be seen at http://studio10interiordesign.com/blog-2/
Current html:
<article class="slide-entry flex_column post-entry post-entry-3536 slide-entry-overview slide-loop-2 slide-parity-even av_one_third real-thumbnail" itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost">
<img width="495" height="400" src="http://studio10interiordesign.com/wp-content/uploads/2018/03/1260-S-Bellaire-Denver-CO-print-002-1-Clubhouse-2700x1800-300dpi-495x400.jpg" class="attachment-portfolio size-portfolio wp-post-image" alt="" srcset="http://studio10interiordesign.com/wp-content/uploads/2018/03/1260-S-Bellaire-Denver-CO-print-002-1-Clubhouse-2700x1800-300dpi-495x400.jpg 495w, http://studio10interiordesign.com/wp-content/uploads/2018/03/1260-S-Bellaire-Denver-CO-print-002-1-Clubhouse-2700x1800-300dpi-845x684.jpg 845w" sizes="(max-width: 495px) 100vw, 495px"><span class="image-overlay overlay-type-extern" style="left: -5px; top: 0px; overflow: hidden; display: block; height: 261px; width: 333px;"><span class="image-overlay-inside"></span></span>
<div class="slide-content">
<header class="entry-content-header">
<h3 class="slide-entry-title entry-title" itemprop="headline">My Hygge</h3>
<span class="blog-categories minor-meta">
Uncategorized
</span>
<span class="av-vertical-delimiter"></span>
</header>
<div class="slide-entry-excerpt entry-content" itemprop="text"></div>
</div>
</article>
<article class="slide-entry flex_column post-entry post-entry-3436 slide-entry-overview slide-loop-3 slide-parity-odd post-entry-last av_one_third real-thumbnail" itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost">
<img width="495" height="330" src="http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1.jpg" class="attachment-portfolio size-portfolio wp-post-image" alt="" srcset="http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1.jpg 2048w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-300x200.jpg 300w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-768x512.jpg 768w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-1024x683.jpg 1024w, http://studio10interiordesign.com/wp-content/uploads/2017/03/Historic-Remodel-1home-image_Large-1-700x466.jpg 700w" sizes="(max-width: 495px) 100vw, 495px"><span class="image-overlay overlay-type-extern"><span class="image-overlay-inside"></span></span>
<div class="slide-content">
<header class="entry-content-header">
<h3 class="slide-entry-title entry-title" itemprop="headline">Sui Generis: A person or thing that is unique, in a class by itself.</h3>
<span class="blog-categories minor-meta">
Uncategorized </span><span class="av-vertical-delimiter">
</span>
</header>
<div class="slide-entry-excerpt entry-content" itemprop="text"></div>
</div>
</article>
CSS
.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
border-radius: 3px;
display: block;
position: relative;
-webkit-perspective: 1000px;
-webkit-backface-visibility: hidden;
margin: 0 auto;
vertical-align: middle;
}
I've thought about adding width: 100% and height: 255px or height: auto but defining a set pixel height seems to stretch some images and I don't want that, especially when resizing the screen. The auto property doesn't seem to give the same height to all images, so I can't use that either.
Any info is appreciated.

Answer 1

Dependens on your css file, you have a two ways to solve it:
Just add the width and height witch you want to give for image show size (fast, but no the good solution for responsive site);
Wrapp the image tag in the support div tag with given width and height for it in your category layout file of WP theme.
For first case, just add to your css file:
.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
border-radius: 3px;
display: block;
position: relative;
-webkit-perspective: 1000px;
-webkit-backface-visibility: hidden;
margin: 0 auto;
width: 100%;
height: 200px;
}
For second solution try:
<div style=" width: 100%; height: 200px; ">
<img width="495" height="400" src="http://studio10interiordesign.com/wp-
content/uploads/2018/03/image006-495x400.png" class="attachment-portfolio
size-portfolio wp-post-image" alt="">
</div>
with css for img tag:
.avia-content-slider .slide-image, .avia-content-slider .slide-image img {
border-radius: 3px;
display: block;
position: relative;
-webkit-perspective: 1000px;
-webkit-backface-visibility: hidden;
margin: 0 auto;
position: relative;
min-height: 100%;
min-width: 100%;
top: -50%;
}

Answer 2

Basically there is no way you can resize all images to the same size and at the same time, maintain their ratios and layouts. However, there is a couple of techniques to make the images look pretty fine and not pixelated.
Using the image as a background, if you have a container with fixed height and width, use the image as a background together with background-size: cover will make sure that the image will always be automatically resized to fit inside the container. background-position then can also be used to move the background image inside the container and display the most prominent part.
Using object-fit. This css property will cut off the sides of the image, preserving the aspect ratio, and also filling in the space. However, it is only supported in IE 16, so if you need to support older versions, it might be a problem.