Image No Stretch or Crop

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

How to set an image's width and height without stretching it?

Yes you need an encapsulating div:

<div id="logo"><img src="logo.jpg"></div>

with something like:

#logo { height: 100px; width: 200px; overflow: hidden; }

Other solutions (padding, margin) are more tedious (in that you need to calculate the right value based on the image's dimensions) but also don't effectively allow the container to be smaller than the image.

Also, the above can be adapted much more easily for different layouts. For example, if you want the image at the bottom right:

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Image No Stretch or crop

What about:

img {
    max-height:150px;
    max-width:150px
}

To achieve your 2nd question on making smaller images bigger, you can do with jQuery. CSS could work if you knew the photo orientation before hand and applied a different css class to those images... But this will work and then you don't need the CSS max-width stuff any more.

<div class="container"><img src="images/DSC_0470.JPG" alt="Rad Image" /></div>

<script>
    $(document).ready(
        function () {
            $('.container img').each(
            function () {
                var theWidth = $(this).width();
                var theHeight = $(this).height();
                if (theWidth < theHeight) {
                    $(this).height(150);
                }
                else {
                    $(this).width(150);
                }

            });
        });</script>

Setting image without cropping and stretching

you can just set both the max-width and the max-height of your images

#container img {
  max-width: 100%;
  max-height: 100%;
}

Doing so the image won't be stretched since your not changing its width or height: whatever is the image size, setting the above properties together ensures that the longest side is reduced to the maximum width (or height) of its parent div, while the other one can freely adapt itself, keeping the original image ratio.

Example http://codepen.io/anon/pen/qEjLZa

Example with centered images (both ver. and hor.): http://codepen.io/anon/pen/NPgege

Displaying an image without cropping or stretching etc with max-height

.avatar-thumb-square2 .avatar-image {
    width: 100%;
    object-fit: cover;
    height: 300px;
    border-radius: 10px;
}

.avatar-thumb-square2{
    width:30%;
}

<div class="avatar-box" data-controller="responsive-image">
  <div class="avatar-thumb-square2" data-responsive-image-target="wrapper">
    <img class="avatar-image" src="https://www.alten.com/wp-content/uploads/2021/05/satellite-donnees-oceanographiques.jpg">
  </div>
</div>

Image to fill div by cropping image (no stretch)? With no background image?

Since you are using tailwindCSS, please use the below classes on the img tag, to comply with your request.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.16/tailwind.min.css" rel="stylesheet"/>
<div class="flex bg-red-500 text-white">
  <div class="overflow-hidden block flex-shrink-0 w-1/3">
    <img class="h-full w-full object-cover" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2017/05/what-is-a-stock-story-770x375.jpg">
  </div>
  <div class="mx-2">
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>