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％

1 个答案: