2

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

Improve this question
2
  • 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? Commented Aug 14, 2019 at 15:38
  • 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. Commented Aug 14, 2019 at 15:43

4 Answers 4

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I didn't want to have any absolute values for the image, I wanted it to be fully responsive, and resize for any screen. Also I tried the object-fit and it just did nothing, not sure why
You can put any allowed CSS value in width and height properties. You can even put calc as value. Take a look here: w3resource.com/css/CSS-values.php
2

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.

Improve this answer

Comments

1

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;
}
Improve this answer

6 Comments

This works fine if you're looking to do background images, but not so great if it's general use images like a profile photo, image gallery, etc. Especially if the image is placed via CMS.
I'm assuming where you put background-size: cover; it was meant to be contain? Anyway I tried this and it seems as though it thinks the div is larger than it actually is, so the top and bottom of the image is still not showing. In the Chrome DevTools it shows the div to be the correct size, but the images are not showing that way. It may be useful information that this div is inside a bootstrap carousel.
@hungerstar Yes, but this the only way you don't get stretched images...and that is what op tries to avoid. So, I don't know what OP is using it for but this is how I always do an image that keeps its original size. And yes there are downsides.
@RobertClarke No, cover will maintain the image aspect ratio as is and cut off on certain resolutions. That is the trade-off.
object-fit is a solution and allows you to use <img> as long as browser support is acceptable. It can also be polyfilled.
|
1

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.