Automatically scale image while keeping aspect ratio

0
votes

I have an img inside a div tag, and currently I am using the CSS

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

This currently keeps the images fitting inside the div, which is what I wanted. However, if the image file is smaller than the div, the image will not be the maximum size it can be. Is there an easy way to maximise the image, while keeping the image inside the div, and keeping the original aspect ratio?

I've tried setting the height to 100%, with a max-width of 100%, but this distorts the image, which is not what I'm looking for. I also tried object-fit: contain;, but this doesn't seem to do anything.

Thanks :)

4
htmlcss
max-width will limit the image to 100% of the image's native width. What that means is, if your image has a width of 400px and the div has a width of 600px, then the image will not fill the full width of the div as it can only stretch to 400px because of max-width. Are any of you're DIVs fixed width/height? – hungerstar
All the divs resize dependent on the screen size. It does work as it is, just if the images have smaller resolutions, it's not going to work as intended, or if someone has a massive screen. – Robert Clarke

4 Answers

2
votes

Try doing adding it as background, then you can do this:

div {
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}
2
votes

@Michelangelo's answer is another way to achieve your objective. If you want your image to be inside a img tag (like your original post), keep your max-width and max-height values, and put one of these inside your CSS class:

1) Keep aspect ratio based on width:

width: 300px; /* Your preferred width */
height: auto;

2) Keep aspect ratio based on height:

width: auto;
height: 300px; /* Your preferred height */

I would also suggest you to take a look at the object-fit property here: https://www.w3schools.com/css/css3_object-fit.asp

It kinda acts as background-size property when you put values like contain or cover, with the plus that you can specify width and height without complicating your layout / DOM hierarchy. It comes very handy when dealing with intrinsic sizes of elements.

1
votes

If you want to keep the image as an HTML element and not a CSS background, I would use object-fit. There are browser support limitations with this CSS property.

https://caniuse.com/#search=object-fit

You could use a polyfill to combat this. Such as: https://github.com/fregante/object-fit-images

An example of what I believe you're after could be: https://codepen.io/bin-man/pen/NWKNWLm

.image-container img {
  object-fit: cover; 
}

You can play around with the image sizes and remove object-fit to see how it behaves.

Hope this helps.

0
votes

I guess this is what you need... Please run the code snippet... 

div {
  width: 100px;
  height: 100px;
}

div > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}
<div>
  <img src="https://www.wellnesspetfood.com/sites/default/files/styles/blog_feature/public/media/images/6615505_950x400.jpg?itok=ylLXPrq6" />
</div>

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg" />
</div>