Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.07.2017, 14:01
Lebemann Lebemann ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.07.2017
Beiträge: 1
Lebemann befindet sich auf einem aufstrebenden Ast
Standard Größer der Bilder mit Parallax

Moin,

vorweg, ich bin relativ unerfahren was das erstellen von Webseiten angeht

Ich habe eine Webseite bei der ich parallax scrolling einsetzten möchte.
Das Theme was ich mir hierfür geholt habe muss ich aber noch ordentlich umbauen.

Ich habe folgendes Problem:
Die Bilder werden viel zu heftig beschnitten und sehen vor allem in der mobilen versuchen richtig kacke aus.

was muss ich wie im css ändern, damit die breite der Bilder immer bei 90% - 100% bleibt? die hohe der Bilder darf und soll natürlich irgendwo bei 50% sein.


ich denke, das ich die richtige stelle im css gefunden habe. ganz sicher bin ich mir aber nicht.



Code:
.article__parallax {
bottom:0;
left:0;
opacity:0;
pointer-events:none;
position:absolute;
right:0;
top:0;
}

.covers .article__parallax {
background:none;
bottom:auto;
left:0;
opacity:1;
overflow:hidden;
position:absolute;
right:0;
top:0;
}

.covers .article__parallax .article__parallax__img {
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
left:-50%;
max-width:none;
min-height:100%;
min-width:100%;
opacity:1;
position:absolute;
top:50%;
transform:translate(-50%);
}

.article__parallax .gmap,.article__parallax .gmap--multiple-pins {
-moz-transform:translate3d(0,-50%,0);
-ms-transform:translate3d(0,-50%,0);
-o-transform:translate3d(0,-50%,0);
-webkit-transform:translate3d(0,-50%,0);
bottom:0;
left:0;
position:absolute;
right:0;
top:50%;
transform:translate3d(0,-50%,0);
}

.article__parallax__slider {
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
bottom:0;
left:0;
position:absolute;
right:0;
top:-50%;
transform:translateY(-50%);
}

.article__parallax__slider img {
position:absolute;
}

.covers {
left:0;
position:fixed;
right:0;
top:0;
}

.lt-ie9 .article__parallax {
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
bottom:auto!important;
height:100%!important;
left:0!important;
top:0!important;
transform:translate(-50%,-50%);
width:100%!important;
}

.no-scroll-effect .article__parallax,.no-scroll-effect .article__parallax .gmap,.no-scroll-effect .article__parallax .gmap--multiple-pins,.no-scroll-effect .article__parallax__img,.no-scroll-effect .article__parallax__slider {
-moz-transform:none!important;
-ms-transform:none!important;
-o-transform:none!important;
-webkit-transform:none!important;
top:0!important;
transform:none!important;
}

.article__parallax--img img {
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
left:50%;
max-width:none;
opacity:0;
position:absolute;
top:50%;
transform:translate(-50%,-50%);
}

.lt-ie9 .article__parallax--img img {
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
-webkit-transform:none;
left:0!important;
top:0!important;
transform:none;
width:100%!important;
}


Schon mal besten Dank für jede Antwort und Hilfe!

Lebemann
Mit Zitat antworten
Sponsored Links