Hey carsjr. Awesome seeing all these ogryns en masse
Got a solution for you with the image ratios here. When you use the img2 tag to resize an image, the (height)x(width) numbers need to correspond to the proportions of the original image in order to retain the height/width ratio.
Example: Using your own first image in this post, I examined it to find the original resolution being 3223x1760. Dividing both numbers with the same factor gives me another set, for example dividing by 4 gives me 806x440. I am displaying your image here with those numbers.
So why divide by 4 in this case? Well, you can use any numbers as long as their proportions are retained, although obviously this will result in an infinite number of varying sizes ranging from super tiny to super large
In this particular case I started from reasoning that a width of around 800 pixels could be a good ballpark number. Dividing the original width by 800 (3223/800) gave me a result of 4.08275, from there I decided for simplicity's sake that dividing heigth and width by 4 would get me close enough. (3223x1760) / 4 = (806x440)
You don't have to calculate it this way if you don't have a specific target height or width in mind. To illustrate another example you could look at the original resolution of 3223x1760 and probably see without a calculator that, divided by ten 10 we would get 322x176, which would display your image as such. Small, but proportions retained:
A bit too small probably, so we could double that into 644x352 and see this:
Bottom line is that as long as you retain the original image ratio in the numbers it will look right, but you have to input those numbers yourself in the img2 tag. And you will need to find out what resolution your original images are to do this. There are tons of different ways to do that, all depending on what operating system/software you are using, so I won't go into specifics. But if you are having trouble finding out it would generally be a matter of examining the properties/info of the file.
Hope that helps!