|
|||
![]()
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 | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrund wird nicht angezeigt | maxx | CSS | 6 | 14.10.2012 19:27 |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 08:21 |
Problem mit Schattenrahmen um Bilder (Typo3) | micronix | CSS | 2 | 20.08.2012 21:01 |
Bildergalerie mit Variablen | fledermaus | Serveradministration und serverseitige Scripte | 1 | 08.04.2008 09:57 |
FF: Div wird größer und größer... | wuschba | CSS | 2 | 13.11.2006 14:33 |