我想将未知宽度/高度的图像放在页面上的中心，同时确保它在大于页面时缩小（即使用max-width/max-height).
我尝试使用display:table-cell方法，但是max-width在 Firefox 中，对于使用 声明的元素中的所有元素都会被忽略display:table-cell。有没有一种方法可以在不使用的情况下垂直居中可变高度元素display:table-cell?
我可以更改标记。 JavaScript 是可以接受的，但我不能使用 JQuery（或任何其他 JS 库）。
这应该证明工作得很好......不需要 JavaScript :)
See the jsFiddle 上的工作演示 http://jsfiddle.net/nzxPV/1/.
CSS
/* Don't Change - Positioning */
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
/* Sizing */
img.absoluteCenter {
max-height:100%;
max-width:100%;
}
HTML
<img class="absoluteCenter" src="PATHTOIMAGE">
Note:这个类可以很容易地用于任何事情。如果您将其用于图像以外的其他用途，请确保添加TAG.absoluteCenterCSS 规则带有max-height and max-width您选择的（其中TAG是您正在使用的 HTML 标签 [例如div.absoluteCenter] and max-width/max-height小于100%).
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
