Question

当用户调整浏览器窗口大小时，我希望图像自动调整大小；当用户调整浏览器大小时，我不希望图像丢失任何细节。我只想要分辨率width：800px height：400px

我竭尽所能并进行了无处不在的搜索，但是他们的解决方案对我而言不起作用，我还设置了宽度100％和最大宽度100％仍然无法访问我的网页。

如果有人想给我一些建议，我将非常感谢您的帮助，谢谢您。

请看一下我的代码。

/*slideshow*/
#slideshow {
    width: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 800px 400px;
    width: 100%;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    margin-top: 40px;
    border: 1px solid;

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    
    <div id="slideshow">

        <div id="slide1" class="slide">
            <span class="slidecontain">SlideImage1</span>
        </div>

        <div id="slide2" class="slide">
            <span class="slidecontain">SlideImage2</span>
        </div>

        <div id="slide3" class="slide">
            <span class="slidecontain">SlideImage3</span>
        </div>

    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>


</body>
</html>

Answer 1

将.slide设置为background-size: cover。

查看文档：{{3}}

您也可以将其放置在background-position: center center;

要使幻灯片的大小与图片的大小相同，您可以将填充底部设置为与图片的比例相同，例如：

.slide {
   ...
   padding-bottom: 72%;
}

/*slideshow*/
#slideshow {
    width: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

.slide {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin-top: 40px;
    border: 1px solid;
    padding-bottom: 72%;
  }

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
    
    <div id="slideshow">

        <div id="slide1" class="slide">
            <span class="slidecontain">SlideImage1</span>
        </div>

        <div id="slide2" class="slide">
            <span class="slidecontain">SlideImage2</span>
        </div>

        <div id="slide3" class="slide">
            <span class="slidecontain">SlideImage3</span>
        </div>

    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>


</body>
</html>

Answer 2

这是辛勤工作后的正确代码：

#slideshow {
    width: 100%;
}

#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slidebg{
	width: 100%;
    height: 100%;
    float:left;
    margin-top: 40px;
    border: 1px solid;
    position: relative;
}
 .slidebg:before {
 	content: "";
    display: block;
    padding-top: 50%;
}
.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
 }

<div id="slideshow">

        <div class="slidebg">
        	<div id="slide1" class="slide">
                  <span class="slidecontain">SlideImage1</span>
            </div>      
        </div>

        <div class="slidebg">
        	<div id="slide2" class="slide">
            	<span class="slidecontain">SlideImage2</span>
            </div>    
        </div>

        <div class="slidebg">
        	<div id="slide3" class="slide">
            	<span class="slidecontain">SlideImage3</span>
            </div>    
        </div>

    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>

使用CSS调整浏览器窗口大小时，如何使图像自动调整大小？

2 个答案: