[Gelöst] dk_caroufredsel - Responsive Breite und feste Höhe

Hallo Zusammen,

wir testen gerade den dk_caroufredsel Slider, ob dieser für ein Projekt in Frage kommen kann.

Wir wollen mit dem Slider erreichen, dass dieser eine feste Höhe von 500 px hat und die Breite automatisch vom Browserfenster gezogen wird. Dies ist auch überhaupt kein Problem und klappt sofort.
Ich habe in den Einstellugen des Sliders eine flüssige Breite und eine feste Höhe für das Karussell eingestellt, außerdem ist bei der Darstellung der Elemente Responsive aktiviert.
Im CSS habe ich dem Element .image_container img eine 100% width und height spendiert. Somit ist das Ganze responsive.

Was ich jetzt nicht hinbekomme ist, dass das Bild, welches im Inhalt verwendet wird vertikal zentriert wird. Im Moment bzw. der Standart ist ja das die obere Kante vom Bild zu sehen ist und alles was nach den 500 Pixeln kommt abgeschnitten wird.

Als Inhalt verwende ich Text Elemente mit Bild.
Hat jemand einen kleinen Tipp für mich?

Mal so ins Blaue:
.image_container{vertical-align:middle; line-height: 250px;}

Hey,

danke für den Versuch. Das war es leider nicht.
Das Problem ist ja irgendwie, dass das Bild ja höher als die 500px der Box sind. Vertikal Allign bringt auf jeden Fall garnichts und das line-height ändert an der Positione des Bildes leider auch nichts.

Zitat:

---

Zitat von jgrotstabel

Hallo Zusammen,

wir testen gerade den dk_caroufredsel Slider, ob dieser für ein Projekt in Frage kommen kann.

Wir wollen mit dem Slider erreichen, dass dieser eine feste Höhe von 500 px hat und die Breite automatisch vom Browserfenster gezogen wird. Dies ist auch überhaupt kein Problem und klappt sofort.
Ich habe in den Einstellugen des Sliders eine flüssige Breite und eine feste Höhe für das Karussell eingestellt, außerdem ist bei der Darstellung der Elemente Responsive aktiviert.
Im CSS habe ich dem Element .image_container img eine 100% width und height spendiert. Somit ist das Ganze responsive.

Was ich jetzt nicht hinbekomme ist, dass das Bild, welches im Inhalt verwendet wird vertikal zentriert wird. Im Moment bzw. der Standart ist ja das die obere Kante vom Bild zu sehen ist und alles was nach den 500 Pixeln kommt abgeschnitten wird.

Als Inhalt verwende ich Text Elemente mit Bild.
Hat jemand einen kleinen Tipp für mich?

---

Vertikales zentrieren ist nicht ganz trivial, aber da du (theoretisch) einen .image_container mit fixer Höher und Breite hast, sollte es so funktionieren: http://jsfiddle.net/CSY48/2/

PHP-Code:

---

figure {
    margin:0;
    width:100%;
    height:100%;
    position:relative;
}

figure img {
    position:absolute;
    left:0; top:0; bottom:0; right:0;
    margin:auto;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    display:block;
} 


---

Die Art des vertikalen zentrierens kommt von hier: http://coding.smashingmagazine.com/2...centering-css/ (bzw. ursprünglich hier: http://html5hub.com/centering-all-the-directions/ ).

Hinweis: die Selektoren solltest du nicht 1:1 so übernehmen.

Hey,

erstmal Danke für die Umfangreiche Antwort.
Du versuchst ja, bzw. schaffst es ja, dass das Bild immer zentriert ist aber man Links und Rechts oder eben oben und unten Freiraum hat. Das ist nicht das was ich erreichen möchte.

Grob erklärt ist mein Ziel das eine Sliderfläche die 100% breit und 500px hoch ist immer komplett mit dem Bild ausgefüllt ist (und das was immer oben und unten zuviel ist nicht sichtbar ist). Also quasi wie eine Schnittmaske in Photoshop. Das Bild füllt in der Breite immer den Slider komplett aus, dass erreiche ich ja dadurch, dass das Bild auf width 100% steht. Jetzt ist das Bild aber immer höher als die 500 px Höhe, logisch bedingt und abgesichert durch 4:3 oder 16:9 Format der Kamera. Mein Ergbniss ist jetzt aber das die obere Kante des Bildes auf der oberen Kante der sichtbaren Sliderfläche ist. Also wird nur unten vom bild was abgeschnitte. Ich möchte aber, dass es so ist das oben und unten quasi gleichviel abgeschnitte wird, also das Bild vertikel zentriert liegt.

Wahninnig schwer zu erklären :-) Ich habe mal eine kleine Grafik gemacht auf der ich meinen jetztigen Stand, mein Ziel und Spookies Lösung visualisiere.
Und diese Nummer, dass eben das Bild vertikal zentriert wird, dass bekomme ich einfach nicht hin :-)

Anhang 13392

Ich habe mal eine Seite gefunden, wo das genau so passiert, wie ich es mir vorstelle.

http://mugeen.com.ar/

Ok, also was du eigentlich haben willst ist das Verhalten des CSS3 properties background-size:cover;, aber halt für normale <img> Elemente. Das geht ohne JavaScript meines Wissens nach nicht.

Wenn du eine CSS-only Lösung haben willst, kann ich momentan nur einen Kompromiss anbieten: http://jsfiddle.net/CSY48/3/

PHP-Code:

---

figure {
    margin:0;
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}

figure img {
    position:absolute;
    left:0; top:0; bottom:0; right:0;
    margin:auto;
    width:auto;
    height:100%;
    display:block;
} 


---

Änderungen: overflow:hidden; auf den <figure> container, height:100%; für das <img>, keine max-width und max-height am <img>. Das hat dann den von dir gewünschten Effekt, so lange das Seitenverhältnis des Bildes in der Höhe kleiner ist, als das Seitenverhältnis des containers. Diese Lösung kommt aber auch nicht ohne JavaScript aus, da das Bild dann nicht zentriert wird.


Willst du jedoch wirklich das background-size:cover; Verhalten zu 100% haben, damit alle erdenklichen Bilder immer den container ausfüllen... dann musst du warten, bis ich die JavaScript Lösung dafür zusammengetüftelt habe oder du findest eine fertige Lösung sonst wo, oder jemand anders postet eine vorher :D.

// so, hier meine JavaScript Lösung: http://jsfiddle.net/CSY48/10/
// Anmerkung: die Lösung hat außerdem den Nachteil, dass man kurz das Bild in noch nicht veränderter Größe sieht, bis alle Resourcen auf der Seite geladen wurden - weil $(window).load(); benutzt wird, statt $(document).ready();. Falls deine Bilder alle eine width und height Angabe im html haben (wovon auszugehen ist), kannst du auch $(document).ready() stattdessen verwenden - dann tritt dieser Effekt nicht auf.

Genau jetzt gerade habe ich den Slider einmal komplett auf Links gedreht. Auf der Website ist mir die logische Idee gekommen, ich kann das ja eben viel besser mit einem Hintergrundbild machen. So das ist auch kein Problem und funktioniert. Siehe hier:

http://slider.agentur-bocholt.de/

ABER: Das funktioniert nicht im IE. Da macht der einfach das nicht, was die Lösung wieder unbrauchbar machen würde. Schau mal erst im Firefox und dann im IE. Wenn das jetzt funktioieren würde, wäre das Thema erledigt. Schrecklich :-)

Dann hilft dir das: https://github.com/louisremi/background-size-polyfill ;)

Wahnsinn, jetzt läufts.
ABER :-) Wenn ich das ganze sliden lassen möchte. Dann rukelt das im IE ganz mekrwürdig. Kann man da noch irgendwie gegensteuern?

Schau noch mal die Demo:
http://slider.agentur-bocholt.de/

Wenn der User will, dass es bei ihm gut aussieht, dann muss er auf einen modernen Browser aktualisieren...

Ja, das sage ich den Kunden auch immer :-)
Ich teste das hier auf nem Windows 7 Rechner mit IE 8. Hast Du das bei Dir nicht mit dem Ruckeln des Bildes? Und wenn nicht, sag mir mal bitte Dein Betriebssystem und die IE Version.

Vielen Lieben Dank für Deine Hilfe, echt sehr cool!!!
Kannst Du mal den Link auf Deine Amazon Wunschliste aktualisieren....!

Zitat:

---

Zitat von jgrotstabel

Ich teste das hier auf nem Windows 7 Rechner mit IE 8. Hast Du das bei Dir nicht mit dem Ruckeln des Bildes? Und wenn nicht, sag mir mal bitte Dein Betriebssystem und die IE Version.

---

Doch doch. Solche behaviors oder DX filter verursachen immer eine schlechte Performance in den alten IEs. Solange deine Zielgruppe aber nicht mehrheitlich IE8 verwendet, würde ich das einfach ignorieren ;).

// Wishlist link fixed

Hallo.

Ich hake hier mal ein, da ich es so ähnlich auch benötige.

Deine Beispielseite läuft ja gerade nicht so das man nicht abgucken kann... ;)

Wie hast du denn das beim caroufredsel mit den Hintergrundbildern gemacht? Einzelne Elemente angelegt und da via CSS die Hintergrundbilder? Stell ich mir aber unkomfortabel vor, oder? Wenn anders, könntest du das nochmal erklären?

Der RockSolid Slider macht das ja per se genau so, das quasi aus der Mitte "beschnitten" wird. Wie wird das denn da gelöst? Beispiel:
http://www.netzwerk-demokratie-mst.de/

Könnte man das nicht adaptieren? Aus verschiedenen Gründen kann/möchte ich den aktuell nicht nutzen.

Gruß
Thomas

also man kann recht leicht mit Template-Anpassungen den Slider auf CSS-Hintergrundbilder umstellen. Das funktioniert recht brauchbar. Hier kannste das z.B. anschauen: http://atelier-st.de/projektdetails/hgb.html

Zitat:

---

Zitat von tblumrich

Der RockSolid Slider macht das ja per se genau so, das quasi aus der Mitte "beschnitten" wird. Wie wird das denn da gelöst? Beispiel:
http://www.netzwerk-demokratie-mst.de/

Könnte man das nicht adaptieren? Aus verschiedenen Gründen kann/möchte ich den aktuell nicht nutzen.

---

Der RockSolid Slider skaliert die Bilder mit JavaScript (inline CSS) und verschiebt sie auch per JavaScript mit einen negativen margin-top so, sodass immer der mittlere Bereich sichtbar ist. Die Vorgehensweise ähnelt im Prinzip der JavaScript Lösung die ich weiter oben fabriziert habe.

Hey tblumrich,

ich fasse mal kurz zusammen wie ich das ganze jetzt umgesetzt habe:

Benötigte Module
[dma_elementgenerator]
[dk_caroufredsel]

ToDo
Mit dem Elementgenerator habe ich mir eine eigene Inhaltsvorlage für den Slider erstelt. Darin gibt es ein Eingabefeld für Bilder und dieses Bild wird als Background Image im Template eingebunden. Das geht, weil man ja mit dem Elementgenerator eigene Templates erstellen kann. Das ist auch garnicht so schwierig, man muss sich nur ein wenig reinarbeiten. Übrigens ist das auch eine super Lösung allgemein für Slider Inhalte, weil man bei den Textboxen einstellen kann, nach wie viel Text nichts mehr geht. Also Idiotensicher...

Danach setze ich diese Elemente in den Slider. Natürlich alles stylen (CSS) wie man es braucht und dann noch Slider Navigation etc. bauen.

Das war es auch schon :-) Das was am längsten gedauert hat, war den richtigen Weg zu finden. Und ohne die technische Unterstützung von Spooky wäre es wohl auch eine noch viel größere Baustelle geworden. Danke nochmal!!!


Gerne schicke ich Dir den Link, ich entwickel das Ding gerade online. Dann schicke mir einfach eben ne PN.

Ich hoffe Du kannst diesem heruntergeschriebenen Konstukt ein paar Ideen entnehmen ;-)


P.S. Um Hintergrundbilder IE sicher zu zentrieren noch dies beachten:

Zitat:

---

Spooky
Dann hilft dir das: https://github.com/louisremi/background-size-polyfill

---

Hallo.

Ich sag einfach mal offiziell vielen Dank an alle!
Für das aktuelle Projekt habe ich mir jetzt zwar doch anders beholfen, aber das nächste Projekt naht und da werde ich das definitiv so mit dem caroufredsel versuchen...

Gruß
Thomas