Question

我使用来自unslider.com的代码旋转横幅。它有4张图片。图像宽度为2080像素。这是我对网站的最大规模。我希望网站和图片缩小到最低1024px。该网站目前正在这样做。（段落文本在1024处停止重新缩放）。

但图像没有。我需要弄清楚如何让横幅调整到1024。

我在这里设置了一个codePen设置，以便更轻松：

这是我的代码：

 <!DOCTYPE html>
 <html>

 <head>

<meta charset="UTF-8">

<title>CodePen - Rotating Image Banner that resizes down to minimum size</title>

<style type="text/css">
#container {
max-width:1280px;  
min-width:1024px;
  }


.banner { 
 position: relative;
 overflow: auto; 
 width:1280px;


}

 .banner ul {margin: 0; padding: 0;  }


 .banner li { 
 list-style: none; 
 }

.banner ul li { 
float: left; 
display:block;
max-width:100%;
height:295px;


 /*     -webkit-background-size: 100% 100%;*/
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
 /*     background-size: 100% 100%;*/

 }

#image1 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image1.png");
}

#image2 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image2.png");
}

#image3 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image3.png");
}


 #image4 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image4.png");
}

</style>
</head>

 <body>

 <div id="container">

<div class="banner">
<ul>
    <li id="image1"></li>
    <li id="image2"></li>
    <li id="image3"></li>
    <li id="image4"></li>
 </ul>
 </div>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu arcu feugiat, posuere felis    vitae, malesuada nulla. Integer dapibus lacus purus. Fusce hendrerit vestibulum purus sed bibendum. Vestibulum turpis tellus, cursus in ullamcorper eget, viverra a dolor. Maecenas sed erat quis nibh iaculis rhoncus in eu mi. Vestibulum sit amet nulla molestie, venenatis magna vel, porta ligula. Phasellus dictum rhoncus diam id ullamcorper. Ut scelerisque purus ac neque semper, non eleifend arcu egestas. Curabitur lacinia est laoreet ligula volutpat, ut suscipit augue interdum. Nulla rutrum mi vel blandit suscipit. Donec ac elit et velit mattis fringilla. Mauris ac cursus massa. Integer vehicula non eros eu dapibus. Aliquam volutpat rhoncus fringilla. Nullam finibus euismod lectus quis tempus.<BR><BR>

  Quisque facilisis eros sit amet nisi malesuada, eget blandit ex convallis. Donec tellus est, placerat nec sapien id, ornare consequat nulla. Curabitur eleifend risus nec ante commodo pharetra id ut lectus. Proin ac tristique lectus. Proin ac quam a dolor auctor rhoncus. Aenean lobortis faucibus erat at sodales. Praesent non lacus quis magna mattis viverra. Integer consequat nibh diam, sed euismod elit tincidunt eget. Donec eu nunc vitae ante ultrices pellentesque sit amet quis eros. Praesent at placerat massa. Vestibulum malesuada vulputate augue a dapibus. Vestibulum sit amet leo quis justo tincidunt tempor.

 </div>

<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://unslider.com/unslider.min.js'></script>

<script>
$(function() {
$('.banner').unslider();
});


</script>

</body>

 </html>

Answer 1

您应该将.banner的宽度设置为auto，这将获得父div或窗口宽度的宽度。

在codepen中它不会工作，你需要在一个html文档中测试它。

<!DOCTYPE html>
 <html>

 <head>

<meta charset="UTF-8">

<title>CodePen - Rotating Image Banner that resizes down to minimum size</title>

<style type="text/css">
#container {
max-width:1280px;  
min-width:1024px;
  }


.banner { 
 position: relative;
 overflow: auto; 
 width: auto;


}

 .banner ul {margin: 0; padding: 0;  }


 .banner li { 
 list-style: none; 
 }

.banner ul li { 
float: left; 
display:block;
max-width:100%;
height:295px;


 /*     -webkit-background-size: 100% 100%;*/
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
 /*     background-size: 100% 100%;*/

 }

#image1 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image1.png");
}

#image2 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image2.png");
}

#image3 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image3.png");
}


 #image4 {

background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image4.png");
}

</style>
</head>

 <body>

 <div id="container">

<div class="banner">
<ul>
    <li id="image1"></li>
    <li id="image2"></li>
    <li id="image3"></li>
    <li id="image4"></li>
 </ul>
 </div>

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu arcu feugiat, posuere felis    vitae, malesuada nulla. Integer dapibus lacus purus. Fusce hendrerit vestibulum purus sed bibendum. Vestibulum turpis tellus, cursus in ullamcorper eget, viverra a dolor. Maecenas sed erat quis nibh iaculis rhoncus in eu mi. Vestibulum sit amet nulla molestie, venenatis magna vel, porta ligula. Phasellus dictum rhoncus diam id ullamcorper. Ut scelerisque purus ac neque semper, non eleifend arcu egestas. Curabitur lacinia est laoreet ligula volutpat, ut suscipit augue interdum. Nulla rutrum mi vel blandit suscipit. Donec ac elit et velit mattis fringilla. Mauris ac cursus massa. Integer vehicula non eros eu dapibus. Aliquam volutpat rhoncus fringilla. Nullam finibus euismod lectus quis tempus.<BR><BR>

  Quisque facilisis eros sit amet nisi malesuada, eget blandit ex convallis. Donec tellus est, placerat nec sapien id, ornare consequat nulla. Curabitur eleifend risus nec ante commodo pharetra id ut lectus. Proin ac tristique lectus. Proin ac quam a dolor auctor rhoncus. Aenean lobortis faucibus erat at sodales. Praesent non lacus quis magna mattis viverra. Integer consequat nibh diam, sed euismod elit tincidunt eget. Donec eu nunc vitae ante ultrices pellentesque sit amet quis eros. Praesent at placerat massa. Vestibulum malesuada vulputate augue a dapibus. Vestibulum sit amet leo quis justo tincidunt tempor.

 </div>

<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src='http://unslider.com/unslider.min.js'></script>

<script>
$(function() {
$('.banner').unslider();
});


</script>

</body>

 </html>

将旋转横幅调整为最小宽度

1 个答案: