zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Größer der Bilder mit Parallax

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.07.2017, 13:01
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
  #2 (permalink)  
Alt 21.07.2017, 19:22
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

XhtmlForum-für fragende für antwortende
__________________
Gruss Dieter

Vegetarier essen meinem Essen das Essen weg.
Und unsere Norweger sind reine Karnivoren.

selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, fotos, parallax

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 07:21
Problem mit Schattenrahmen um Bilder (Typo3) micronix CSS 2 20.08.2012 20:01
Bildergalerie mit Variablen fledermaus Serveradministration und serverseitige Scripte 1 08.04.2008 08:57
FF: Div wird größer und größer... wuschba CSS 2 13.11.2006 13:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:51 Uhr.