图片为父级的100％。 父母是固定的

Question

Could somebody please assist. I am trying get an image to have a max-height and an auto width. The problem is these rules are being ignored as it's parent is fixed

DEMO http://jsfiddle.net/gop4jhm9/5/

#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    width: auto;
    height: auto;
    max-height: 100%;
    background: red;
    display: inline-block;
    padding: 10px;
    max-height: 30%;
}

#myDiv img {
    width: auto;
    height: 100%; // being ignored
}

Is there any way of doing this via CSS, JS, jquery ?

Answer 1

The problem is that you have the #myDiv with two max-height attributes. Take away the second one, which restricts the div to 30%, and it will work in fixed.

Answer 2

That is because it intends to keep the image's aspect ratio because you set the margin to auto. if you wish for a max height to be set, set it in the max-height property of the #myDiv.img .

#myDiv {
    position: fixed;
    top: 100px;
    left: 50%;
    width: auto;
    height: auto;
    background: red;
    display: inline-block;
    padding: 10px;
}

#myDiv.img
{
     width: auto;
     max-height:90%;
}