Responsive ImageSlider Bildergröße

[nookie]

Guten Abend liebe Community,
ich habe eine Frage und zwar will ich auf meiner Homepage einen Slider der sich über die komplette Breite des Bildschirms erstreckt haben, ob nun mit FlexSlider oder jQuery Cycle 2. Es ja nun nicht das Problem, den Slider über die komplette Breite zu strecken, sondern ist meine Frage welche Bildgröße am Sinnvollsten wäre oder wie ich das ganze geschickt anstelle?

 

[nookie]

Keiner eine Lösung? oder habe ich meine Frage nicht deutlich formuliert?

 

[Sempervivum]

Dann probiere ich es mal: Du fragst ja, welche Bildgröße am sinnvollsten wäre. Wenn sich der Slider über das ganze Browserfenster erstrecken soll, müsstest Du ja eine Bildgröße verwenden, die auf den größten anzunehmenden Bildschirm zugeschnitten ist. Weil diese zwangsläufig relativ groß ist, würde ich eigentlich davon abraten, so etwas zu machen, sondern den Slider für eine normale Bildgröße wie 800x600 auszulegen.

 

[nookie]

Also der Slider soll sich ned über das ganze Browserfenster erstrecken, sondern nur über die gesamte Breite. Die Höhe soll eine feste Pixel angabe haben. Aber nehmen wir mal an ich würde jetz ein Bild von 800x300 nehmen, würde es doch bei einem Desktop mit 1920 breite oder 1600 mit der eigenschaft "width: 100%" über die ganze Breite gezogen werden und damit auch unscharf werden. Das ist halt das Problem.

 

[Sempervivum]

Das meinte ich ja: Du musst die Bildbreite nach der größten anzunehmenden Breite des Browserfensters auslegen. Wenn das Bild nur 300 px hoch ist, wäre das ja noch vertretbar, dann müsstest Du es 1920x300 groß machen.
Aber: Wenn Du die Höhe fest hältst und die Breite änderst, hast Du das Problem, dass die Proportionen des Bildes stark verzerrt werden. Willst Du das in Kauf nehmen?
Ich habe mir schon einige responsive Sliders angesehen, aber dabei war keiner, der nur eine Abmessung des Bildes geändert hätte.

 

[nookie]

Dann ist meine einzigste Möglichkeit es so hinzubekommen, wenn ich ein Bild habe was sagen wir mal 1920x**** Maße hat einen gewissen Ausschnitt davon zu nehmen, mit 300px Höhe damit ich meine proportionen beibehalte. Mh, muss doch noch eine andere Möglichkeit geben oder nicht?

 

[Tronjer]

Dann ist meine einzigste Möglichkeit es so hinzubekommen, wenn ich ein Bild habe was sagen wir mal 1920x**** Maße hat einen gewissen Ausschnitt davon zu nehmen, mit 300px Höhe damit ich meine proportionen beibehalte. Mh, muss doch noch eine andere Möglichkeit geben oder nicht?

Falls es um background-images geht, lässt sich das mit background-size: cover oder contain anpassen. Außerdem besteht die Möglichkeit, die Bilder je nach Größe des Viewports über Media Queries auszutauschen. Bei src-images kann man den Bildertausch per JavaScript vornehmen.

 

[nookie]

Außerdem besteht die Möglichkeit, die Bilder je nach Größe des Viewports über Media Queries auszutauschen.

Das sollte mein Problem lösen, danke! :)

 

[AzRaIL]

Oder aktiv mit jQuery die Breite des Viewports abfragen und diese dem Bild als Breite geben. Wobei es auch reichen würde den jeweiligen Elementen 100% Breite zu geben. Kannst auch noch einem Element ne feste Höhe geben und overflow: hidden; Das sollte es auch tun. Mit einem Link zu deiner Seite könnte man dir sicherliche besser helfen.