0

我正在开发一个网站，我必须在其中显示图片（不是问题）。但是，我必须将它显示为这个链接：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;
}
4

1 回答 1

1

如果我理解正确你不需要浏览器的内置缩放（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 获得实际的图像宽度和高度？）。

上面的代码片段也是为了让你开始，你应该在一些初始化函数中获取图片及其参数，并且只在调整大小事件时重新计算/修改 css。

于 2013-02-26T17:36:13.300 回答