Webdesign-Forum

Normale Version: Bilder richtig skalieren
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Hallo,
ich bekomme es leider nicht hin, dass die Bilder im meinem Slider richtig skaliert werden, wenn ich den Browser verkleinere oder vergrößere. Würde mich freuen wenn mir jemand kurz hilft. Zu sehen ist hier: Test
Quellcode slide.css:
Code:
@keyframes slidy
{
   0% { left: 0%; }
   20% { left: 0%; }
   25% { left: -100%; }
   45% { left: -100%; }
   50% { left: -200%; }
   70% { left: -200%; }
   75% { left: -300%; }
   95% { left: -300%; }
   100% { left: -400%; }
}

*
{
   box-sizing: border-box;
}

figure
{
   margin: 0;
   background: #101010;
   font-family: Istok Web, sans-serif;
   font-weight: 60px;
   
}

div#captioned-gallery
{
   overflow: hidden;
   
}

figure.slider
{
   position: relative;
   width: 500%;
   font-size: 0;
   animation: 45s slidy infinite;
}

figure.slider figure
{
   width: 20%;
   display:inline-block;
   
}

figure.slider img
{
   width: 100%;
   height: 350px;
}

figure.slider figure figcaption
{
   position: absolute;
   bottom: 0;
   background: rgba(0,0,0,0.4);
   color: #fff;
   width: 100%;
   font-size: 16px;
   padding: .6rem;
}


Quellcode html:
Code:
<div id="captioned-gallery">
    <figure class="slider">
        <figure>
            <img src="img/1.jpg" alt>
            <figcaption>Bild1</figcaption>
        </figure>
        <figure>
            <img src="img/2.jpg" alt>
            <figcaption>Bild2</figcaption>
        </figure>
        <figure>
            <img src="img/3.jpg" alt>
            <figcaption>Bild3</figcaption>
        </figure>
        <figure>
            <img src="img/4.jpg" alt>
            <figcaption>Bild4</figcaption>
        </figure>
        <figure>
            <img src="img/1.jpg" alt>
            <figcaption>Bild5</figcaption>
        </figure>
    </figure>
</div>


Vielen Dank. Gruss José
Hast du es geschafft, weil ich das gleiche Problem leider habe! :/