0

我想要达到的效果类似于此模板上的幻灯片http://www.agence-me.com/html/k/

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

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

.img {
   width: 100%;
}

和

<img src="..." class="img" />

但我想将图像固定为最大浏览器大小，而不是通过调整窗口大小来改变它的尺寸。

4

4 回答 4

0

仅检查此 css 演示http://jsfiddle.net/yeyene/tCxw3/1/

你想要这样吗？调整大小看看效果，图片大小为1600x1200 px。

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;
}
于 2013-07-08T03:52:15.580 回答
0

最大宽度：500px；将其限制为最大 500 像素，因此它不会变大。

希望这就是你所追求的。

于 2013-07-08T03:32:09.553 回答
0

它正在对window.onresize事件进行一些巧妙的调整大小，以呈现缩放/拉伸图像以填充给定空间的外观。图像本身是1600x998，所以没有太多的质量下降的担心。

于 2013-07-08T03:47:22.117 回答
0

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

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

这将使它持续居中，就像示例一样。希望这可以帮助。

于 2013-07-08T03:33:28.880 回答