在幻灯片中制作所有图像大小相同

Question

我试图让幻灯片中的所有图片都具有相同的尺寸，我尝试过使用

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

但不起作用

Answer 1

我首先将这个添加到你的css

body,html{
height: 100%;

}

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

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

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

最后，你应该能够使用身高和身高。宽度为100％

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

-->

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想要一个全屏滑块，它会比那更复杂。试试这个：

.slideshow-container {
	position:absolute;
	height:100%;
	width:100%;
}
.slideshow-container img {
  max-width:100%;
	width:100%;
	position:fixed;
	left:0;
  }

我还建议您查看示例。从这里可能：

Link