最终解决办法是，所有的THUMBNAIL IMAGE 都是同样的 200*120 比例，就不会出现对不齐整的问题了。

用那个 REGENERATE THUMBNAIL PLUGIN 20分钟就全部REGENERATED。

Tools -> Regenerate Thumbnails

Found another thumb image issue:

The WordPress thumb image is 200*120, I set it in WP.

But Youtube image is done by 200*150, this is wrong, this is done by the Plugin of youtube image catch.
So, I need to change that:
But there is no place to change the Video Thumbnail plugin about the size.

So I checked the WordPress setting:

Changed from 200*150 to 200 * 120

This CROP checkbox is important

OKAY, basically I have got it right:

/wautom/wp-content/themes/mesocolumn-wautom

style.css:

use 280px

aside.home-feat-cat .feat-thumb {margin: 0px; padding: 0px; float: left; width: 100%; overflow: hidden; height: auto; max-height: 280px;}

AND

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 1.625em;
border-radius: 5px;
max-height: 280px;
}

OK, know now why the BIG Thumb images have display problem, because the Box Model size is wrong:

Why the small thumb image always displayed correctly in proportion?
maybe has to do with this box (image is put inside this box area) — you see this when in Firefox you Inspect the Element:

2019.12.26 OKAY, finally I got it correct: It is all done in the child theme’s style.css: /WordPress/wp-content/themes/mesocolumn-wautom style.css aside.home-feat-cat .feat-thumb {margin: 0px; padding: 0px; float: left; width: 100%; overflow: hidden; height: auto; max-height: 220px;} /* very strange and also important: the max-heigh must be 200px, otherwise you lose the radius corner at the bottom of image. it seems this 200px is a magic size defined somewhere. OK I found it, this number must be same as the one defined in feat-thumb, the max-height: 200px; Now, I changed it to 220px. */ img.alignleft, img.alignright, img.aligncenter { margin-bottom: 1.625em; border-radius: 5px; max-height:… Read more »

inspect the thumb image element:

div class=”feat-thumb”

About Cache of images: You need to clear the cache of images to see the new style.css effect. OR: You can use the FireFox developer edition’s Priave Browsing window, it never uses caches. Sometimes you need to see your website without using any caching mechanism. In this article we will demonstrate how you can achieve that. 1 – Try to open a page in private mode Most of web browsers give their users the option to browse the website in private mode. When you are using this option, your browser does not use any caching mechanism. This means you’re visiting… Read more »

I am using this Theme: /WordPress/wp-content/themes/mesocolumn-wautom — style.css — functions.php I changed this file of the theme (the base parent theme): [1] \mesocolumn\lib\functions\hooks-functions.php function meso_feat_set_fpostimg() { $feat_thumb = dez_get_featured_post_image(‘ ‘,’ ‘,480, 200, ‘alignleft’,’medium’,dez_get_singular_cat(‘false’),the_title_attribute(‘echo=0’), false); return $feat_thumb; } ==> changed: from 200 to 480 [2] ==> only this file change has real effect Also this file –> and only by changing this file it becomes really 250, not the file above. /WordPress/wp-content/themes/mesocolumn/lib \mesocolumn\lib\templates\feat-cat-meta-top.php $feat_thumb = dez_get_featured_post_image(‘ ‘,’ ‘,480, 200, ‘alignleft’,’featured-post-img’,dez_get_image_alt_text(),the_title_attribute(‘echo=0’), false); changed: from 200 to 480 [3] — round corner, in the style.css of the child theme mesocolumn-wautom: /WordPress/wp-content/themes/mesocolumn-wautom/ style.css the… Read more »

I want to change the height from 200 to 250

f you want to change the default WordPress thumbnail size, you can do so in four quick steps:
Go to your WordPress dashboard.
Navigate to the Settings > Media tab.
Look for the Image sizes > Thumbnail size section.

https://www.elegantthemes.com/blog/tips-tricks/how-to-change-thumbnail-size-in-wordpress-and-why-you-want-to