How do you make an img responsive inside a div up to maximum height?

Question

I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.

   <div class="imageContainer">
      <img src="{{employee._image}}">
   </div>


img
  :max-width 100%
  :height auto

.imageContainer
  max-height: 300px

This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!

The images have to be set dynamically, so hardcoding the url in css with background image is not an option.

Have a look here. https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent/14264093#14264093 — Daniel, Jun 19 '17 at 18:14
Thanks, your solution with the inherit keyword does the trick, now i have the issue of centering the image, but that is another issue. — slipperypete, Jun 19 '17 at 18:23
I added the answer down in the list, but if you can close the post without, then go ahead. Just tying loose ends. I also think that your problem of centering is done with the `text-align` property as shown. — Daniel, Jun 19 '17 at 18:48
I don't think you need height auto on the image. Try removing height auto and add max-height 300 to the img — Adrianopolis, Jun 19 '17 at 20:13

score 0 · Answer 1 · answered Jun 19 '17 at 18:20

0

Try setting the css top and bottom properties to 0px.

img
    :max-width 100%
    :height auto
    :top 0px
    :bottom 0px

answered Jun 19 '17 at 18:20

Martins

508
4
12

score 0 · Answer 2 · answered Jun 19 '17 at 18:46

To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent. The answer and theory around it can be found here: Child with max-height: 100% overflows parent

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

img {
    max-height: inherit;
    max-width: inherit;
}

score 0 · Answer 3 · answered Jun 19 '17 at 20:11

0

I believe I was able to achieve your goal like this:

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

answered Jun 19 '17 at 20:11

dlaub3

1,107
9
20

How do you make an img responsive inside a div up to maximum height?

3 Answers3