Ich kenn den Rocksolid-Slider nicht, hab aber mal Verschiedenes mit Firebug probiert, um hinter seine Funktionsweise zu kommen. Wie Du gern hättest, ist das nach meinem Eindruck höchstwahrscheinlich nicht hinzubekommen, weil der ganz anders arbeitet, als er dafür sollte.
Um die Formatierung im responsiven Layout sagen wir mal von 320 bis ca. 2.400px möglichst optimal zu skalieren, sollte zunächstmal das Format der Bilder gut darauf abgestimmt sein. 2000 x 500 px bzw. das Verhältnis 4:1 eignet sich recht gut. Wenn man dann den Images width:100% und height:auto mitgibt und dem äußeren Slider-Container garkein Format, richtet sich die Darstellung nur nach der Imagegröße. Kannst Du Dir als Beispiel auf einer meiner Seiten mal anschauen, wie das aussieht, wenn Du die Browserfenstergröße von sehr klein bis sehr groß veränderst: khw-netz.de
Kann man auch anders proportionieren, aber eines ist klar - bei 100% Breite muss die Höhe immer automatisch sein, damit die Bilder nicht verzerrt angezeigt werden. Das bedeutet, je mehr Pixel das Originalbild in der Breite hat, um so niediger wird es angezeigt. Und umgekehrt. Daran ist nichts zu ändern. Machst Du es zu breit, wirds in kleinen Viewports nicht hoch genug. Oder Du legst die Bilder in Überbreite an mit verzichtbaren Randbereichen und gibst Ihnen per Mediaquery bei schmalem Viewport über 100% Breite, z. B. 120 und dem Container overflow:hidden. Dadurch kannst Du es so gut variieren, dass die Höhe bei jeder Auflösung optimal ist.
So funktioniert Dein Slider aber eben nicht. Da überschreibt anscheinend Javascript dynamisch die Bildgröße. Mit Firebug sieht man, dass es Inline-CSS ist, also wahrscheinich im DOM überschrieben wird. Dagegen ist kein Kraut gewachsen. Nichtmal mit Verwendung des !important Attributs. Außerdem wird den meisten beteiligten Elementen eine feste Höhe zugewiesen, die sich an einem Breakpoint ändert. Vielleicht per Mediaquery, vielleicht ebenfalls im DOM.
Du könntest zwar das äußere DIV des Sliders überschreiben und auch per Mediaqueries passend machen:
Code:
.main-slider {
height: auto;
width: 100%;
}
Das reagiert so ziemlich als einziges, aber die Bilder rutschen dann einfach raus und werden abgeschnitten, wenn sie nicht passen. Außerdem sollte das äußere DIV garkeine Breite und Höhe erhalten für das, was Du willst. Sondern die Sliderproportionen von innen gesteuert werden, nämlich durch die Größe des Image-Elements. Teste den CSS-Schnipsel ruhig mal, da wirds bei Browser-Resize erkennbar. Du könntest die Fotos natürlich so mitteln, dass sie trotzdem bei allen Auflösungen gut aussehen. Das einzige, was man dafür anfassen müsste, wär das mit dem Lieferwagen. Bei den anderen beiden fällt es nicht auf, da bräuchtest Du nichts ändern.
Na ja, das wäre die schnellste und einfachste Lösung. Und wenn Du den Bildern etwas Überbreite verpasst, könntest Du per Mediaqueries auch ein wenig die Slider-Höhe der jeweiligen Auflösung anpassen. Nicht grad elegant. Doch bei Deinen 3 Bildern könnte man es vertreten. Ansonsten den Slider gegen einen ersetzen, der sich besser von außen beeinflussen lässt.
Noch ein kleiner Tipp: Die beiden roten Flächen ganz oben links sind eine Grafik und die Schrift wird auflösungsabhängig extrem unscharf. Kann dann kein Mensch lesen und sieht auch miserabel aus. Da sollte höchstens der "3 S"-Schriftzug eine Grafik sein, falls es keinen Font dafür gibt. Die normale Schrift hingegen normaler Font und mit Mediaqueries die Schriftgröße möglichst optimal anpassen. Oder alternativ statt der Pixelgrafik eine Vektorgrafik im SVG-Format erstellen. SVG ist jeglicher Auflösung stets gestochen scharf. Wäre hier sogar schneller erledigt als das Gefrickel mit HTML-Schrift und mindestens genauso gut.
Slideshow automatisch an Grösse des Bildschirms anpassen ?
Zitieren
Zitat von Michi Löffler
Lesezeichen