幻灯片放映下一张图片 div 将被削减 40-50%

Question

我想要一个幻灯片放映，其中下一张图片 div 将被剪切成 40-50%。

这意味着下一张要显示的图像必须剪切 40-50%，以便它看起来像幻灯片。

.slideshow_image_div {
  height: 300px;
  border: thin black solid;
  width: 300px;
  overflow: hidden;
}

.slideshow_image_div .slideshow_images {
  float: left;
  width: 45%;
  margin-right: 10px;
}

.slideshow_images img {
  max-width: 100%;
  max-height: 100%;
}

<div class="slideshow_image_div b">
  <div class="slideshow_images">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
  </div>
  <div class="slideshow_images">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
  </div>
  <div class="slideshow_images">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
  </div>
</div>

Answer 1

如果您希望整张幻灯片显示在同一行，您可以提供 white-space: nowrap 并删除 float 以及提供 display: inline-block 并删除硬编码高度，所以它真的看起来像一个幻灯片容器：

.slideshow_image_div {
  border: thin black solid;
  padding: 5px 0 0 5px;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
}

.slideshow_image_div .slideshow_images {
  display: inline-block;
  width: 40%;
  margin-right: 5px;
}

.slideshow_images img {
  max-width: 100%;
  max-height: 100%;
}

<div class="slideshow_image_div b">
  <div class="slideshow_images">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
  </div>
  <div class="slideshow_images">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
  </div>
  <div class="slideshow_images">
    <img src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="">
  </div>
</div>

幻灯片放映下一张图片 div 将被削减 40-50%

Slideshow next image div to be cut in 40-50%

javascript

css

slideshow