|
|||
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 |
Sponsored Links |
|
||||
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
Sponsored Links |
Stichwörter |
css, fotos, parallax |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |