Internet Explorer的CSS變焦忽略最大寬度和最大高度

CSS：Internet Explorer的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-widthmax-height和。爲什麼會這樣？

JSFiddle也可用here。

來源

2014-02-27 Vladimirs

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的我用：

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

裸記住，雖然該邊距和補可以甩開定位，寬度和高度。一些元素（divs）要求內容「可見」。使用position:absolute;將使元素相對於它的靜態位置放置，我不認爲你想用它來定位圖像的中心。另一個建議是，如果你的父元素是一個固定的像素大小，爲什麼不讓這個子圖像的大小相同？或者使用圖像作爲父級的背景圖片？

來源

2014-02-27 14:44:34 sourRaspberri

感謝您的回覆，但父元素可以是任意大小。我期望的所有內容都是精確地在該容器的中心顯示圖像，如果圖像太小，縮放不超過10倍。因此，如果您在普通瀏覽器中打開http://jsfiddle.net/f8uqF/2/，則可以看到該圖像位於結果容器的中心（水平和垂直），但如果您在IE中打開該圖像，則只會看到部分10倍放大圖像 – Vladimirs

@Vladimirs不太確定建議。我聽說zoom是一箇舊的，即'黑客'，從來沒有用過它。我的猜測會是ie9 +折舊它。其他瀏覽器似乎並沒有使用它。我個人只給父母設置「高度」和「寬度」，然後給出圖像「最小高度」和「最小寬度」都爲100％，將圖像設置爲父親的尺寸參數。這是更高級的縮放鏈接。我相信你已經設置了1000％的縮放比例（只刪除了文章） http://css-tricks.com/almanac/properties/z/zoom/ – sourRaspberri

Internet Explorer的CSS變焦忽略最大寬度和最大高度

回答

相關問題