Consider this as the solution:

object-fit: contain;
width: 80%;
height: 300px;

You have the flexibility to adjust the width and height according to your requirements, while the object-fit attribute will handle the cropping for you.

For more details on the potential values of the object-fit attribute and a compatibility chart, please visit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

By utilizing the methods below, you can easily adjust the size of images to fit their parent container, making it easy to scale up or down based on the width.

All images are contained within a fixed-width parent element for demonstration purposes, which would match the actual width in a live environment.

Effective Approach (2018):

This technique instructs the browser to display the image at its maximum available width while automatically adjusting the height proportionally.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>Original dimensions of this image are 400x400 pixels, but CSS will resize it accordingly:</p>
<div class="parent">
  <img width="400" height="400" src="https://place-hold.it/400x400">
</div>

Innovative Solution:

This advanced option allows for cropping images regardless of their original size and includes adding a background color to fill any gaps created by the crop.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>The image originally measures 640x220 pixels, but with CSS adjustments:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://place-hold.it/640x220">
  </div>
</div>

To determine the top padding percentage, calculate the image's aspect ratio like so:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Hence, the top padding should be set to 34.37%.

Although similar to other solutions mentioned, I encountered a scenario where my images varied in height and width.

I found this approach incredibly effective in ensuring that all images utilized the available space without distorting their proportions:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

If you are okay with the background-size property only working in ie>=9, then you can achieve the desired effect by utilizing a div with background-image and setting background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

By adjusting the size of your div, both vertically and horizontally within the div while maintaining its aspect ratio. Remember to specify the sizes in the CSS since divs do not have width/height attributes on the tag itself.

This method contrasts setecs answer as it provides a constant image area defined by you, leaving empty spaces based on the div size and image aspect ratio, unlike setecs answer which creates a box exactly matching the scaled image size (without any empty spaces).

Edit: Referencing the MDN background-size documentation, you can mimic the background-size property in IE8 using a proprietary filter declaration:

Even though Internet Explorer 8 does not support the background-size property, you can emulate some of its functionality using the non-standard -ms-filter function:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Get rid of the "height" attribute.

<img src="big_image.jpg" width="900" alt=""/>

When you specify both, you alter the image's aspect ratio. Only setting one will resize it while maintaining the aspect ratio.

If desired, to prevent excessive sizing:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Firefox 71+ (2019-12-03) and Chrome 79+ (2019-12-10) have recently introduced support for internally mapping the width and height HTML attributes of the IMG element to the new aspect-ratio CSS property.

This calculated aspect ratio helps in reserving space for images until they are fully loaded, preventing any page "jump" after the image is loaded as long as the calculated aspect ratio matches the actual one.

In order for this feature to function properly, either the width or height of the image must be set to auto using CSS:

IMG {max-width: 100%; height: auto; }

<img src="example.png" width="1280" height="720" alt="Example" />

Using the example above, even if the image is not yet loaded and its effective width is less than 1280 due to max-width: 100%, the aspect ratio of 16:9 (1280:720) will be maintained.

More details can be found in Firefox's related bug report 392261.

Check out this solution:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

By using this CSS code, the image will always cover the entire parent element while maintaining its aspect ratio when scaling up or down.

Here is a simple CSS code snippet that will automatically resize images while maintaining their original aspect ratio:

.image-container {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

This technique is advantageous. Utilize the scale-down attribute - its purpose is self-explanatory.

Applying styles directly:

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

By incorporating this method, the image will be prevented from being stretched out by flexbox. In this scenario, the image's width would be adjusted to 50% of its parent container while maintaining proportionate height adjustments.

Simplicity is key.

Simply swap out the height attribute with the aspect-ratio attribute.

img {
  max-width: 500px;
  aspect-ratio: 900 / 600;
}

<img src="big_image.png" width="900"/>

The aspect-ratio attribute may not be required, but it helps prevent image layout shifts.

If you want to ensure an image maintains a specific aspect ratio while remaining responsive, here's how you can achieve that:

Using HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

With SCSS styling:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // maintaining a 2:1 aspect ratio
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

This technique ensures the image will always adhere to the specified aspect ratio, irrespective of its original dimensions.

Credits to @Kseso at http://codepen.io/Kseso/pen/bfdhg. Visit the provided URL for more aspect ratios and a live demonstration.

To style your image container, assign the CSS class image-class to it:

<div class="image-styling"></div>

Then, include the following code in your CSS file:

.image-styling {
    background: url(...insert image path here...) no-repeat;
    background-size: cover;
    background-position: center center;
}

If you're looking to create a responsive design, it's recommended to utilize the Viewport units along with min/max attributes in this way:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

If you want to resize an image to fit a specific size, you can achieve this with minimal code. It's quite simple.

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo for opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
}

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

Here is a solution for you:

.image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Click here for the solution

If you're looking to add an image with a fixed percentage of width, rather than a fixed pixel width, this answer is for you.

This technique comes in handy when dealing with various screen sizes.

Some key points to keep in mind:

1. Utilize padding-top to determine the height based on the width.
2. Employ position: absolute to position the image within the padding area.
3. Use max-height and max-width to ensure the image stays within the parent element.
4. Include display:block and margin: auto to center the image.

I've added detailed comments about these techniques in the fiddle provided.

I've discovered alternative methods to achieve the same result. These solutions involve not having an actual image in the HTML markup, therefore I personally prefer the first method when using the "img" element in HTML.

Try out a simple css approach utilizing background images: Solution 1

Create a background-image with text overlay: Solution 2

The idea behind using position absolute is derived from: this source

Utilize the aspect-ratio CSS property to control the aspect ratio of elements.

.image-container {
 aspect-ratio: 1/1; // creates a square
 aspect-ratio: 16/9; // for wide screen 1080p
 aspect-ratio: 4/3;
 aspect-ratio: 2/3;
}

To create a stylish div element, follow these steps:

<div class="box" style="background-image:url('/path/to/your/picture')"></div>

Then apply the following CSS rules to customize it further:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // alternatively, you can use cover

To achieve center alignment, simply apply display: flex and align-items: center to the container (you can experiment with different values for align-items). Alternatively, you can use align-self directly on the image element instead of using align-items.

When an image is too large for a specified area, it will automatically shrink to fit (although it won't enlarge the image).

The method suggested by setec works well for "Shrink to Fit" in auto mode. However, for optimal expansion to fit in 'auto' mode, you'll first need to place the received image in a temporary id and then check if it can be expanded in height or width based on its aspect ratio compared to that of your display block.

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

This strategy is particularly helpful when received images are smaller than the display box. It's recommended to save them on your server in their original small size rather than an expanded version to fill your larger display box efficiently and save on size and bandwidth.

Make Adjustments:

Use the following for dimension manipulation:-

Apply transform: scaleX(1.2); to adjust width only.

Also,

Utilize <strong>transform: scaleY(1.2);</strong> to manipulate height exclusively.

This technique is applicable to images and videos within HTML and CSS, maintaining aspect ratios unchanged.

Have you considered using a pseudo element for vertical alignment? This code snippet is designed for a carousel but can be adapted for any fixed size container. It ensures the aspect ratio is maintained and adds @gray-dark bars at the top/bottom or left/right for the shorter dimension. Additionally, the image is horizontally centered using text-align and vertically aligned using the pseudo element.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Showcasing in full screen:

img[data-attribute] {height: 100vh;}

Remember, if the viewport height exceeds that of the image, the image quality will decrease proportionally to the gap.