调整大小时放大图片

时间:2013-02-26 15:53:27

标签: javascript jquery css

我正在开发一个我必须显示图片的网站(不是问题)。 但是,我必须将其显示为此链接:http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

所以,在调整大小时,我必须放大图片,不要缩放它。 有些人知道怎么做吗?

这就是我所拥有的:

HTML:

<div id="container_images">
    <ul>
        <li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li>
    </ul>
</div>

CSS:

#container_images{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
}

#container_images li{
    display: block;
    list-style: none;
    z-index: -30;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:1;
}

#container_images li img{
    width: 100%;
    height: 100%;
    display: block;
}

1 个答案:

答案 0 :(得分:1)

如果我理解正确你不需要浏览器的内置缩放(ctrl +),你只需要在调整窗口大小时将图片填入浏览器的整个窗口。

你需要2件事。

首先,你需要一些javascript来执行窗口调整大小事件,然后你需要一些简单的数学来计算图片的中心,同时考虑新的窗口大小并将图片的左/上边距设置为新值。

您可以使用jQuery轻松完成此操作:

$(window).resize(function() {
    var h = $(window).height();
    var w = $(window).width();
    var pic = $('#container_images img');
    var pic_width = pic.width(), pic_height = pic.height();

    $(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2);
});

要记住的一件事是,如果你的图片的宽度/高度已经从原始尺寸改变了,你将从width()和height()函数中获得新的尺寸。

因此,您要么确保未触摸原稿,要么使用其中一个解决方案来获取原始图片尺寸(例如How do I get actual image width and height using jQuery?)。

上面的代码片段也是为了让你开始,你应该在一些init函数中获取图片及其参数,并且只在resize事件上重新计算/修改css。