Центрирование img по горизонтали и вертикали с помощью JQuery

Question

Центрирование img по горизонтали и вертикали с помощью JQuery

0

Я пытаюсь центрировать логотип этого бренда вертикально и горизонтально на всей странице с помощью JQuery. Он работает с изменением размера браузера, но не изначально. Обратите внимание, что этот код изменяет размер изображения, чтобы он соответствовал странице. Я пробовал $ (окно) и $ (документ) JS:

$(function() {
    var resizeToFit = function(){
        var $this = $(document);
        var imgw = $("#overlay-logo img").width();
        var pw = $this.width();
        var $overlaylogo = $("#overlay-logo img");
        $overlaylogo.css("width", pw - 100);
        var left = (pw / 2) - (imgw / 2);
        $overlaylogo.css('margin-left',left);
    }
    $(window).resize(function(){
        resizeToFit();
    });
    resizeToFit();
});

CSS:

#overlay-logo{
position:absolute;
top:50%;
z-index: 999999;
}

HTML:

<div id="overlay-logo">
  <img src="img/overlay.png" alt="overlay" />
</div>

Johnston 20 сен. 2013, в 19:18

Источник

Теги:

javascript

jquery

html

css

resize

1 ответ

Ещё вопросы

malificent · Answer 1 · 2013-09-20T15-57-00.000Z

вы должны иметь возможность сделать это с помощью простого css.

#overlay-logo{    
    height:99%;
    width:99%;
    margin:auto;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
}

здесь скрипка: http://jsfiddle.net/GheZd/

EDIT Просто сделайте свой рост и ширину 99%. Вы можете применить этот стиль непосредственно к изображению... вам необязательно нужен div.

Мне нужно, чтобы изменить размер изображения, чтобы соответствовать странице. JQuery, который я написал текущий, делает это. Я отредактировал свой ответ, чтобы показать это.
отредактировал мой ответ соответственно