在调整大小时放大图片

Zoom on a picture on resizing

本文关键字：放大 小时 调整      更新时间：2023-09-26

我正在开发一个网站，我必须显示图片(不是问题)。但是，我必须将其显示为以下链接: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;
}

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

你需要两件东西。

首先，你需要一些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()函数中获得新的大小。

所以你要么应该确保原始图片没有被触摸，要么使用一个解决方案来抓取原始图片的大小(例如，我如何使用jQuery获得实际图像的宽度和高度?)。

上面的代码片段也只是让你开始，你应该在一些init函数中抓取图片和它的参数，只在resize事件中重新计算/修改css。

相关文章：