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：

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;将元素相对于其静态位置定位，我认为您不想使用它来将图像定位在中心。另一个建议是，如果您的父元素是固定像素大小，为什么不使子图像大小相同？或者将图像用作父母的背景图像？

Internet Explorer CSS缩放忽略最大宽度和最大高度

1 个答案: