Html 随着浏览器宽度的减小，图像被挤压_Html_Css_Browser_Width

Html 随着浏览器宽度的减小，图像被挤压

html css browser

Html 随着浏览器宽度的减小，图像被挤压,html,css,browser,width,Html,Css,Browser,Width,我真的被这个浏览器大小的问题所困扰，每次我把浏览器的宽度变小，它都会挤压图像，然后图像的比例就不合适了代码如下：我已经挣扎了很长时间，现在不能让它做什么网站上面 <body> <div class="container"> <div class="slideshow-block"> <ul class="slides"> <li><img src="http://www.example.co

我真的被这个浏览器大小的问题所困扰，每次我把浏览器的宽度变小，它都会挤压图像，然后图像的比例就不合适了

代码如下：

我已经挣扎了很长时间，现在不能让它做什么网站上面

<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>

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

您可以使用图像作为背景来实现所需的功能：

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

还有一些选项：

用户

对象适合

属性来修复它。在我的情况下，我已经修复了使用

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

您将遇到的问题是，在某个点上，图像的纵横比不合适：我已经处理过这一问题。您链接到的页面使用@nathvarun建议的

背景尺寸：cover

。

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

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