Diashow nächstes Bild div in 40-50% geschnitten werden

Question

Ich möchte eine Diashow mit nächsten Bild div, die in 40-50% geschnitten werden soll.

Dies bedeutet, dass das nächste angezeigte Bild um 40-50% gekürzt werden muss, damit es wie eine Diashow aussieht.

.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

Wenn Sie die gesamte Folie in der gleichen Zeile angezeigt werden sollen, können Sie white-space: nowrap geben und entfernt float zusammen mit einem display: inline-block und entfernt, um die hartcodierte Höhe zu geben, so dass es wirklich sieht aus wie ein Dia Behälter:

.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>