幻灯片根据图像改变尺寸

Question

我在div内的幻灯片中有4张图像，看起来像“宝丽来”。原来其中一张图像会使整个拍立得更长。我不希望这种情况发生，我希望它始终保持相同大小。 这是我的html：

     <div class="polaroid">       
      <div class="w3-content w3-display-container" style="max-width:800px">
          <img class="mySlides" src="<c:url value="/resources/pics/casa1.jpg" />" >
          <img class="mySlides" src="<c:url value="/resources/pics/casa2.jpg" />" >
          <img class="mySlides" src="<c:url value="/resources/pics/casa3.jpg" />" >
          <img class="mySlides" src="<c:url value="/resources/pics/casa4.jpg" />" >
          <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
            <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
          </div>
        </div>

      <div class="container">
        <p class="direction">Street Name, Los Angeles, CA</p>
      </div>
    </div>

CSS：

div.polaroid {
    margin-top: 15px;
    float: left;
    margin-left: 15%;
    width: 35%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
    max-height: 100%;
}

.mySlides{
    height: 100%;
    width: 100%;
}

这是我的宝丽来外观

Answer 1

代替：

<img class="mySlides" src="<c:url value="/resources/pics/casa1.jpg" />" >

如果您可以改用背景图片，则可以执行以下操作：

<div class="mySlide" style="background-image:url('dynamic-src-goes-here')"></div>

然后只需为mySlide设置CSS：

.myslide{
  width:300px;
  height:200px;
  background-size:cover;
}

它会填满宽度和高度以适合它，所以它可能不是您想要的，但这也许是一个很好的折衷方案？