Javascript 调整大小时缩放图片

我正在开发一个网站，在那里我必须显示一张图片（没有问题）。 但是，我必须将其显示为以下链接：

因此，在调整大小时，我必须放大图片，以避免缩放。 有人知道怎么做吗

以下是我所拥有的：

html:

---

如果我理解正确，您不需要浏览器内置的缩放（ctrl+），只需要在调整窗口大小时使图片填充浏览器的整个窗口

你需要两样东西

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

您可以通过以下方式轻松做到这一点：

需要记住的一点是，如果图片的宽度/高度已从原始大小更改，则将通过width（）和height（）函数获得新的大小

因此，您应该确保原稿未被触摸，或者使用其中一种解决方案来抓取原始图片大小（例如）

---

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

请不要期望用户对外部站点进行反向工程。请在你的问题中加入一个工作示例。编辑我的文章，对不起，你是说用ctrl+/-调整大小吗？是的，当我使用ctrl+/-增加窗口宽度时，我需要将图片居中并放大（ctrl+）不会起作用，因为您无法删除浏览器的默认功能以使用其自己的方法放大/缩小页面。

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

#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;
}

$(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);
});