인터넷 익스플로러 CSS 줌은 최대 폭 및 최대 높이를 무시

Question

CSS :

.absolute-centered { 
    max-width: 100%; 
    max-height: 100%; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    overflow: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: auto !important; 
    width: auto !important; 
    zoom: 10 
} 

HTML :

<img src="http://funnyasduck.net/wp-content/uploads/2012/09/Internet-Explorer-Meme.jpg" class="absolute-centered" /> 

IE (9, 10) max-width 및 max-height을 무시 것으로 보인다. 왜 그런 일이 일어나는거야?

JSFiddle도 사용할 수 있습니다. here.

Answer 1

max-width 및 max-height은 부모 요소에 해당합니다. 예를 들어

요소의 중심에 이미지를 배치하는 여러 가지 방법이 있습니다

#parent{ 
    width:500px; 
    max-width:500px; 
    height:100px; 
    max-height:100px; 
    background:#FF0000; 
} 
.child{ 
    max-width:100%; 
    max-height:100%; 
} 

하지만 부모 요소 내가 가장 좋은 것입니다 어떤 방법을 제안 할 수 없습니다를 보지 않고. 은 사업부 년대 들어 내가 사용했습니다 : 마음에

div#parent{ 
    width:500px; 
    height:500px; 
    background:#FF0000; 
} 
div#parent>img.child /*your child element*/{ 
    width:50%; 
    height:50%; 
    margin:auto; 
    background:#00FF00; 
} 

베어 마진과 패딩이 위치, 너비와 높이를 던질 수 있지만. 일부 요소 (div)는 내용을 '표시'해야합니다. position:absolute;을 사용하면 고정 위치에 상대적으로 요소의 위치가 정해 지므로이 이미지를 가운데에 배치하는 데이 요소를 사용하고 싶지는 않습니다. 또 다른 제안은 부모 요소가 고정 된 픽셀 크기라면 자식 이미지를 같은 크기로 만들지 않는 이유는 무엇입니까? 또는 이미지를 부모의 배경 이미지로 사용합니까?