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: 
You cannot effectively base it on the height using standard css techniques, but you can make the `height` relate directly to the `width` of the image for a more flexible layout. Try this:

```
img {
    position: relative;
    width: 50%;     /* desired width */
}
img:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

```
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/>