Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bilder richtig skalieren
#1
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é
Zitieren
#2
Hast du es geschafft, weil ich das gleiche Problem leider habe! :/
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste