我真的很困扰这个浏览器大小调整问题，每次我缩小浏览器宽度时，都会压缩图像，然后图像的比例实际上就不合适。
这里是代码：http://jsfiddle.net/LaLt4/
$(document).ready(function(){
var myCounter = 0;
$('.slides').cycle({
fx: 'none',
speed: 80,
timeout: 80,
timeoutFn: calculateTimeout
}).cycle("pause");
function calculateTimeout( currElement, nextElement, opts, isForward) {
// here we set even number slides to have a 2 second timeout;
// by returning false for odd number slides we let those slides
// inherit the default timeout value (4 sec)
myCounter++;
return myCounter % 8 ? 50 : 2000;
}
}); // END doc ready
// The other function to start cycling
$(document).ready(function(){
$(this).find('.slides').addClass('active').cycle('resume');
});
很久以来，我一直在为此苦苦挣扎，无法让它完成上述网站的工作。
<body>
<div class="container">
<div class="slideshow-block">
<ul class="slides">
<li><img src="http://www.example.com/person/images/person%201.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%202.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%203.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%204.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%205.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%206.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%207.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%208.jpg" class="demo-img"></li>
<li><img src="http://www.example.com/person/images/person%209.jpg" class="demo-img"></li>
</ul>
</div>
</div>
</div>
</body>
CSS
.slides{
position:fixed;;
z-index:-1;
top:0;
left:0;
margin-top:-75px;
}
.slides img{
position:fixed;
top:0;
width:100%;
z-index:-1;
margin-top:-75px;
}
#bgimage {
width: 100%;
height: 120%;
background-position: center;
background-size: cover;
}
如果显式设置高度和宽度，将无法保持比例。
您正在寻找的东西可以通过使用图像作为背景来实现：
#bgimage{
background:url('http://www.slynkon.com/alison/images/Alison%20Levi%203.jpg') no-repeat center center fixed;
background-size:cover
}
更多选项：http://css-tricks.com/perfect-full-page-background-image/
用户object-fit属性对其进行修复。就我而言，我已经固定使用
<img
src="http://www.example.com/person/images/person%201.jpg"
style="object-fit: cover;">