html - 在幻灯片中使所有图像大小相同

即时通讯试图使幻灯片中的所有图像具有相同的大小，我尝试使用

.slideshow-container img {
  height: 100%;
  width: 100%;
}

但不起作用

最佳答案

我首先将其添加到您的CSS

body,html{
height: 100%;

}

然后，我将创建一个父元素以基本上包含所有图像

<div class='container'> <!-- your images --> </div>

然后将其宽度设置为500px x 500px

最后，您应该能够以100％的高度和宽度使用

$(document).ready(function(){
  $('.2').click(function(){
      $('.img1').css("display","none");
      $('.img2').css("display","block");
  });
  $('.3').click(function(){
      $('.img2').css("display","none");
      $('.img3').css("display","block");
  });
});

// not a very good example of how to make a slideshow but its more to show how to make images the same size as opposed to having a working slideshow

body,html{
    margin: 0;
    height: 100%;
}
.container{
    width: 80%;
    height: 50%;
    background-color: black;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}
.img1{
    background-image: url('https://images.pexels.com/photos/284951/pexels-photo-284951.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

}
.img2{
    background-image: url('https://images.pexels.com/photos/397998/pexels-photo-397998.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

    display: none;
}
.img3{
    background-image: url('https://images.pexels.com/photos/376533/pexels-photo-376533.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;

    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div class="img1"></div>
  <div class="img2"></div>
  <div class="img3"></div>
</div>

  <button class="1">Img 1</button>
  <button class="2">Img 2</button>
  <button class="3">Img 3</button>
<!--
Photo by Timotej Nagy from Pexels https://www.pexels.com/photo/dark-gold-lamp-light-284951/

-->