Javascript CSS或JS-在浏览器调整大小时将图像保持在外部

我试图实现的与此模板上的幻灯片类似

请注意调整窗口大小时幻灯片中的图像是如何被剪切的。这可以通过纯CSS或JS实现吗

我知道我可以通过使用屏幕调整图像大小

.img {
   width: 100%;
}

及

---

但我希望将图像固定为最大浏览器大小，而不是通过调整窗口大小来更改其尺寸。

最大宽度：500px；将其最大值限制为500px，这样它就不会变大

---

希望这就是您想要的。

尝试将图像设置为div中的背景图像，并使用CSS背景位置，如下所示：

.img{
    background-position:50% 50%; 
}

这将使其始终保持居中，与示例完全相同。

---

希望这有帮助。

它在

窗口上进行了一些巧妙的调整大小。onresize

事件提供了缩放/拉伸图像以填充给定空间的外观。图像本身是

1600x998

，因此不太担心质量下降。

检查这个仅css的演示

你想这样吗？调整大小并查看效果，图像大小为1600x1200像素

div {
    float:left;
    width:100%;
    height:300px;
    background: url(http://2.bp.blogspot.com/-YUUHSmN2iKc/URqH5KMr6OI/AAAAAAAABpE/ta3lwt2KDx8/s400/desktop-wallpaper-1600x1200.jpg) no-repeat center left fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

---

如何定义最大浏览器大小？他们打开您的页面时浏览器的大小？用户屏幕的大小？

div {
    float:left;
    width:100%;
    height:300px;
    background: url(http://2.bp.blogspot.com/-YUUHSmN2iKc/URqH5KMr6OI/AAAAAAAABpE/ta3lwt2KDx8/s400/desktop-wallpaper-1600x1200.jpg) no-repeat center left fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}