Question

我正在创建一个图像滑块，当屏幕达到600或更低时，我希望图像是屏幕宽度的100％。我试过使用宽度：100％和最大：宽度：600px认为这会使它们响应。但是现在我意识到这只是600px宽而不是100％的屏幕，最大宽度。我怎样才能做到这一点？

$(document).ready(function(){
  var image_width = $(".img_cont").width();
  var image_count = $(".carousel li").length;
  var carousel_width = image_width * image_count + image_width;
  var padding = $(".active img").height() /4;
  
  $(".carousel").css("width", carousel_width);
  $(".img_cont").css("paddingTop", padding);
  $(".active").css("paddingTop", 0);
  
  $(window).resize(function(){
    if($(window).width() <= 600){
        var image_width = $(".img_cont").width();
        var image_count = $(".carousel li").length;
        var carousel_width = image_width * image_count;

        $(".carousel").css("width", carousel_width);
        $(".img_cont").css("paddingTop", 0);
        $(".active").css("paddingTop", 0);
      }else if($(window).width() < 1600){
        var image_width = $(".img_cont").width();
        var image_count = $(".carousel li").length;
        var carousel_width = image_width * image_count + image_width;
        var padding = $(".active img").height() /4;

        $(".carousel").css("width", carousel_width);
        $(".img_cont").css("paddingTop", padding);
        $(".active").css("paddingTop", 0);
      }else {
        var image_width = $(".img_cont").width();
        var image_count = $(".carousel li").length;
        var carousel_width = image_width * image_count + image_width;
        var padding = $(".active img").height() /4;

        $(".carousel").css("width", carousel_width);
        $(".img_cont").css("paddingTop", padding);
        $(".active").css("paddingTop", 0);
      }
      });
  });

*{
  padding: 0;
  margin: 0;
}

body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.cont{
  position: relative;
  font-size: 0;/*removes white space*/
  margin: 60px auto;
  padding: 0;
/*   overflow: hidden; */
}

.carousel{
  padding: 0;
  list-style-type: none;
  height: auto;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  overflow: hidden;
}

.carousel li{
  float: left;
  background-color: pink;
}

#next{
  position: absolute;
  top: 45%;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: blue;
  font-size: 0;
  z-index: 1;
}

#prev{
  position: absolute;
  top: 45%;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: blue;
  z-index: 1;
}

.img_cont img{
  width: 100%;
  max-width: 600px;
  height: auto;
  max-height:600px;
}

.active img{
  width: 100%;
  max-width: 1200px;
  height: auto;
  padding: 0;
}

@media screen and (max-width: 1600px){
  .img_cont img{
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 1000px;
    height: auto;
    padding: 0;
  }
}

@media screen and (max-width: 1200px){
  .img_cont img{
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 0;
  }
}

@media screen and (max-width: 1000px){
  .img_cont img{
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .active img{
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 0;
  }
}

@media screen and (max-width: 600px){
  
  img_cont{
    width: 100%;
    max-width: none;
  } 
  
  .img_cont img{
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 0;
  }

  .active img{
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 0;
  }
}

<div class="cont">
  <div id="next">
  </div> 
  <div id="prev">
  </div> 
  <ul class="carousel">
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
    </li>
    <li class="img_cont active">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
    </li>
    <li class="img_cont">
      <img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
    </li>
  </ul>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Answer 1

我自己解决了这个问题。我将600px媒体查询更改为此

@media screen and (max-width: 600px){

  img_cont{
    width: 100%;
    max-width: none;
  } 

  .img_cont img{
    width: 100vw;
    /* max-width: 600px; */
    height: auto;
    padding: 0;
    max-width: none;
  }

  .active img{
    width: 100vw;
    /* max-width: 600px; */
    height: auto;
    padding: 0;
    max-width: none;
  }
}

但是我不明白为什么当我将100vw改为100％时，图像只显示其原始宽度而不是100％的屏幕宽度。有谁能解释一下？

Answer 2

为什么不在CSS上使用@media Rule？例如

Exception in thread "main" java.lang.NullPointerException

现在你的风格会根据屏幕宽度而变化。对于你的情况，我们可以像这样写

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (max-width: 480px) {
    body {
        background-color: red;
    }
}

您可以在不使用@media screen and (max-width: 600px) { carousel { width: 100% } } @media screen and (min-width: 600px) { carousel { <whatever you want> } }的情况下编写公共属性，并编写类似的独占属性。

Answer 3

只是为了向您展示基本概念。我刚刚从w3school拉出了关于滑块的代码。在图像周围添加容器，并将图像的大小设置为100％，并使容器具有特定的大小。一旦我看到你的问题，你的原始图像大小不会超过600px（猜测这就是为什么你想让它变得更大（100％），当窗口大小小于那个。我只是覆盖css内容集max-width为530px当它小于600px时，使其成为600px。请参阅下面的代码。希望它会奏效！

<style>
.w3-display-container
{
    max-width:530px;
}
@media screen and (max-width: 600px){
.w3-display-container
{
    max-width:600px;
}
</style>

主要代码

    <!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<style>
.w3-display-container
{
    max-width:530px;
}
@media screen and (max-width: 600px){
.w3-display-container
{
    max-width:600px;
}
</style>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" style="width:100%">
  <img class="mySlides" src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" style="width:100%">
  <img class="mySlides" src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" style="width:100%">


  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) 
  {
    slideIndex = 1
  }
  if (n < 1) 
  {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) 
  {
     x[i].style.display = "none";  
  }

  x[slideIndex-1].style.display = "block";  
}
</script>

</body>
</html>

使图像响应

3 个答案: