html - 幻灯片根据图像改变大小

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

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