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

【问题标题】：Image squashed as browser width decreases随着浏览器宽度减小，图像被压扁
【发布时间】：2014-09-24 02:22:56
【问题描述】：

我真的被这个浏览器尺寸问题困住了，每次我缩小浏览器宽度时，它都会挤压图像，然后图像的比例就不正确了。

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

【问题讨论】：

您将遇到的问题是，在某些时候图像的纵横比不适合：jsfiddle.net/LaLt4/1 我已经处理过这是with Javascript。您链接到的页面虽然使用background-size: cover @nathvarun 建议。

标签： html css browser width

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

使用图片作为背景可以实现你想要的：

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

DEMO PLUNKER

【讨论】：