垂直居中可变高度图像，同时保持最大宽度/高度
Posted
技术标签:
【中文标题】垂直居中可变高度图像，同时保持最大宽度/高度【英文标题】：Vertical centering variable height image while maintaining max-width/height 【发布时间】：2011-09-11 02:19:05 【问题描述】：我想将未知宽度/高度的图像放在页面的中心，同时确保它在大于页面时缩小（即使用max-width/max-height）。
我尝试使用display:table-cell 方法，但是对于使用display:table-cell 声明的元素中的所有元素，Firefox 中忽略了max-width。有没有办法在不使用display:table-cell 的情况下将可变高度元素垂直居中？
我可以更改标记。 javascript 是可以接受的，但我不能使用 JQuery（或任何其他 JS 库）。
【问题讨论】：
【参考方案1】：这应该证明工作得很好......不需要 JavaScript :)
请参阅working demo on jsFiddle。
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">
注意：这个类可以很容易地用于任何事情。如果您将其用于图像以外的其他内容，请确保添加 TAG.absoluteCenter CSS 规则以及您选择的 max-height 和 max-width（其中 TAG 是您正在使用的 HTML 标签 [例如 @987654329 @] 和 max-width/max-height 小于 100%)。
【讨论】：
你确定吗？margin:auto 可与 width 一起使用，但看起来不适用于 `height.至少在我在 Chrome 中的测试中。
这是一个非常巧妙的边距技巧：自动 - 谢谢！这是我用来测试它的小提琴：jsfiddle.net/Zygxq
@Mic，是的，它适用于高度。诀窍是位置：绝对；顶部：0；底部：0； （左：0；右：0；水平对齐）。
哇，这太棒了。我从未在其他地方看到过这种技巧。这是否适用于所有内容，即不仅仅是单个图像？
@MTsoul - 是的，它适用于任何事情。但是，对于块元素，您必须设置宽度/高度（它们不会水平收缩到内容）。要让它工作，你所要做的就是添加 TAG.absoluteCenter（或者你可以使用第二个类 [.someClass.absoluteCenter] 或 id）。然后，添加最大高度和最大宽度，一切就绪:)【参考方案2】：
这是使用 javascript 的一种方式：
<html>
<head>
<style>
html, body
height:100%;
margin:0;
border:0;
padding:0;
background:#000;
body
position:relative;
img
border:0;
padding:0;
margin:0 auto;
max-width:100%;
max-height:100%;
display:block;
position:absolute;
</style>
</head>
<body>
<img />
<script>
(function()
var imgs = [
'http://farm3.static.flickr.com/2396/2078094921_ee60c42d0f.jpg',
'http://farm6.static.flickr.com/5242/5353846171_9169f810dc_b.jpg',
'http://farm6.static.flickr.com/5284/5336493514_8e41696b66_b.jpg'
],
img = document.getElementsByTagName('IMG')[0],
getStyle = function(elm)
return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
,
bodyStyle = getStyle(document.body),
toInt = function(pxSize)
return +pxSize.replace(/px/,'');
,
chgImg = function()
img.src = imgs[i++ % imgs.length];
img.onload = function()
var imgStyle = getStyle(img);
img.style.left = ( toInt(bodyStyle.width) - toInt(imgStyle.width) ) / 2 + 'px';
img.style.top = ( toInt(bodyStyle.height) - toInt(imgStyle.height) ) / 2 + 'px';
img.onload = null;
;
,
i = 0;
chgImg();
setInterval(chgImg, 3000);
)();
</script>
</body>
</html>
【讨论】：
【参考方案3】：试试这样的...
演示：http://jsfiddle.net/wdm954/jYnk8/1/
$(function()
h = $('.img').height();
w = $(window).height();
if (h < w)
$('.img').css('margin-top', (w - h) /2 + "px");
else
$('.img').height(w);
);
（您可以通过更改一些我已注释掉的 CSS 来测试不同的尺寸。）
【讨论】：
以上是关于垂直居中可变高度图像，同时保持最大宽度/高度的主要内容，如果未能解决你的问题，请参考以下文章
使锚标记填充父 flex 元素的 100% 高度和宽度，同时垂直和水平居中