幻灯片下一个图像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>