我正在尝试使用 JQuery 在整个页面上垂直和水平居中该品牌 Logo 。它在浏览器调整大小时确实有效,但最初无效。 请注意此代码调整图像大小以适合页面。我尝试了 $(window) 和 $(document) 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>
最佳答案
你应该能够用直接的 CSS 来做到这一点。
#overlay-logo{
height:99%;
width:99%;
margin:auto;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
这是一个 fiddle :http://jsfiddle.net/GheZd/
编辑 只需将您的高度和宽度设置为 99% 即可。您可以将此样式直接应用于图像...您不一定需要 div。
关于javascript - 使用 JQuery 水平和垂直居中 img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18922331/