Question: I am aware of the image resizing technic of changing image proportions based on width:

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

```

I need to do the same thing only based on the height of the parent, not the width. I have tried the following with no effect:

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

```

I hope I explaining this well enough.

Please help :)

Answer: 
`max-height` will only restrict the height to be less than the given value.

If you want it to be the same as its parent.. give it as `height: 100%`

hence this should work:
CSS:

```
img{
  height: 100%; // changed max-height to height here
  width: auto; // this is optional
}

```
i have tried this and it worked .

```
    <div class="parent">
    <img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>

.parent {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

```

see it here
<https://jsfiddle.net/shuhad/vaduvrno/>