Question

我想要实现的内容类似于此模板上的幻灯片显示http://www.agence-me.com/html/k/

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

我知道我可以使用

在屏幕上调整图像大小

.img {
   width: 100%;
}

和

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

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

Answer 1

最大宽度：500px;将其限制为最大500px，因此不会变大。

希望这就是你所追求的目标。

Answer 2

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

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

这将使它不断保持居中，就像示例一样。希望这会有所帮助。

Answer 3

它正在对window.onresize事件进行一些巧妙的调整，以提供缩放/拉伸图像以填充给定空间的外观。图像本身为1600x998，因此不必担心质量下降。

Answer 4

只检查此css DEMO http://jsfiddle.net/yeyene/tCxw3/1/

你想要这样吗？调整大小并查看效果，图像大小为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;
}

CSS或JS - 在浏览器调整大小时将图像保留在外面

4 个答案: