CODEWITHSUNDEEP
htmlcss
Robert Clarke
Robert Clarke

Reputation: 485

Automatically scale image while keeping aspect ratio

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 :)

Upvotes: 2

Views: 10465

Answers (4)

Adam Kemp
Adam Kemp

Reputation: 106

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.

Upvotes: 2

Lazar Nikolic
Lazar Nikolic

Reputation: 4404

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>

Upvotes: 1

FonzTech
FonzTech

Reputation: 408

@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.

Upvotes: 3

Michelangelo
Michelangelo

Reputation: 5958

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;
}

Upvotes: 1

Related Questions