Вертикальное центрирование изображения переменной высоты при сохранении максимальной ширины / высоты - PullRequest
Новая
       8

Вертикальное центрирование изображения переменной высоты при сохранении максимальной ширины / высоты

2 голосов
/ 08 июня 2011

Я хочу центрировать изображение неизвестной ширины / высоты на странице, при этом убедившись, что оно сжимается, если оно больше страницы (т. Е. Используйте max-width / max-height).

Iпопытался использовать метод display:table-cell, но max-width игнорируется в Firefox для всех элементов в элементах, объявленных с display:table-cell.Есть ли способ вертикально центрировать элемент переменной высоты, не используя display:table-cell?

Я могу изменить разметку вверх.JavaScript приемлем, но я не могу использовать JQuery (или любую другую библиотеку JS).

Ответы [ 3 ]

17 голосов
/ 08 июня 2011

Это должно хорошо работать ... JavaScript не нужен :)

См. Рабочую демонстрацию на 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">

Примечание: Этот класс может использоваться для чего угодно довольно легко. Если вы используете это для чего-то отличного от изображения, обязательно добавьте правило CSS TAG.absoluteCenter с max-height и max-width по вашему выбору (где TAG - это HTML-тег, который вы используете [например, div.absoluteCenter] и max-width / max-height меньше 100%).

0 голосов
/ 08 июня 2011

Вот один из способов с 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>​
0 голосов
/ 08 июня 2011

Попробуйте что-то вроде этого ...

Демо: 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);
    }

});

(Вы можете протестировать различные размеры, изменив некоторые комментарии, которые я прокомментировал.)

...