[英]Centering img horizontally and vertically with JQuery
我正在尝试使用JQuery在整个页面上垂直和水平地放置此品牌徽标。 它确实适用于调整浏览器的大小,但最初 并不起作用 。 请注意,此代码将调整图像大小以适合页面。 我试过$(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;
}
这是一个小提琴: http : //jsfiddle.net/GheZd/
编辑然后将您的高度和宽度设为99%。 您可以将这种样式直接应用于图片...您不一定需要div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.