我的图片会根据屏幕尺寸进行调整,但.height
和.width()
无法调整,导致margin-left
和margin-top
无法更改。有没有办法让它调整?
var $src = $(this).attr("href");
$('#overlay').append('<img class="image" src="' + $src + '" />');
var $image = $('img');
$('.image').css('max-height','80%');
$('.image').css('max-width','90%');
$('.image').css('position', 'fixed');
$('.image').css('top', '50%');
$('.image').css('left', '50%');
var $height = $image.height();
var $width = $image.width();
$('.image').css('margin-top', (($height/2)*-1));
$('.image').css('margin-left', (($width/2)*-1));
答案 0 :(得分:1)
问题是当您弄乱它时图像没有被加载。所以高度,宽度总是为零。
所以你可以做的是为load event
添加一个处理程序,当它被解雇时你可以执行你的代码:
var $src = $(this).attr("href");
$('#overlay').append('<img class="image" src="' + $src + '" />');
var $image = $('img');
$image.on("load",function(){ // This is the new stuff, it listen to the load event
// which is fired when the image is loaded and the size
// size is known
var $height = $image.height();
var $width = $image.width();
$('.image').css('margin-top', (($height/2)*-1));
$('.image').css('margin-left', (($width/2)*-1));
console.log("Height: " + $height);
console.log("Width: " + $width);
})
我还提供了一个更优化代码的示例。例如,每次使用选择器时,JavaScript都会在DOM中搜索该元素。你应该只对这一次,看看: http://jsfiddle.net/W8sNw/2/
答案 1 :(得分:0)
试试这个:
var $src = $(this).attr("href");
$('#overlay').append('<img class="image" src="' + $src + '" />');
var $image = $('img')
$image.ready(function(){
$('.image').css('max-height','80%');
$('.image').css('max-width','90%');
$('.image').css('position', 'fixed');
$('.image').css('top', '50%');
$('.image').css('left', '50%');
var $height = $image.height();
var $width = $image.width();
$('.image').css('margin-top', (($height/2)*-1));
$('.image').css('margin-left', (($width/2)*-1));
});
答案 2 :(得分:-1)
jquery resize event可能会有所帮助。
将代码放入函数中并在resize事件中调用函数。