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

Question

可以请人帮忙。 我正在尝试使图像具有max-height和auto宽度。 问题是这些规则已被忽略，因为其父级是fixed

演示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
}

有没有办法通过CSS，JS，jquery做到这一点？

Answer 1

问题是您具有两个max-height属性的#myDiv 。 删除第二个，将div限制为30％，它将固定工作。

Answer 2

那是因为它打算保持图像的纵横比，因为您将边距设置为自动。 如果希望设置max-height ，请在#myDiv.img的max-height属性中进行#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%;
}