垂直居中可变高度图像，同时保持最大宽度/高度答案

【问题标题】：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 库）。

【问题讨论】：

标签： javascript css vertical-alignment

【解决方案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 来测试不同的尺寸。）

【讨论】：