Question

我真的坚持这个浏览器大小调整问题，每当我将浏览器宽度设置得更小时，它会压缩图像，然后图像的比例就不合适了。

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

Answer 1

如果明确设置高度和宽度，则无法保持比例。

使用图像作为背景可以实现您的目标：

#bgimage{
background:url('http://www.slynkon.com/alison/images/Alison%20Levi%203.jpg') no-repeat center center fixed;
background-size:cover
}

DEMO PLUNKER

更多选项：http://css-tricks.com/perfect-full-page-background-image/

Answer 2

用户object-fit属性来修复它。就我而言，我已经固定使用

<img 
    src="http://www.example.com/person/images/person%201.jpg" 
    style="object-fit: cover;">

随着浏览器宽度减小，图像被压扁

2 个答案: