HTML CSS clip rect

[ToMbY1234]

Hallo,

ich habe auf meiner Seite einen Slider.
Ich möchte, dass der Slider, sobald die Breite des Browserfensters unter eine bestimmte breite geht auf beiden Seiten(rechts und links) "abgeschnitten" wird.
Es muss möglich sein links und rechts ungleichmäßig abschneiden zu können.
Ich bin auf den Befehl "clip: rect(0px 0px 0px 0px)" gestoßen, der das sehr gut könnte.
Ich wäre auch bereit eine andere Methode zu verwenden.
Bei dem Clip Befehl ist das Problem, dass position auf absolute oder fixed gestellt werden muss und dann verschwindet mein Bild, obwohl die übergeordnete Div die position relative hat.
Ich habe versucht ein Codebeispiel zu bauen und habe es bei JSFiddle hochgeladen und hoffe, dass es reicht. https://jsfiddle.net/s7x6vpao/
Ich komme einfach nicht auf die Lösung.
Wenn das Browserfenster kleiner wie der Slider wird darf auch kein Horizontaler Scrollbalken entstehen.
Das Bild soll einfach an den Seiten (evtl. ungleichmäßig also rechts mehr wie links) abgeschnitten werden.
Ich will mit dieser Funktion erreichen, dass ich mit dem Bild im Slider immer die volle Bildschirmgröße einnehmen kann (Auch bei Handys oder Tablets im hochformat also anderes Seitenverhältnis).
Ich hoffe ihr könnt mir hier helfen.

Danke im Voraus!

[eagle275]

hm grundsätzlich solltest du auf die Displaygröße mit media-queries im CSS abstellen können - speziell um eben auf Hochkant-Display einzugehen ...

[ToMbY1234]

Ja, das sollte funktionieren. Nur auf welche Art. Ich würde es in dem Fall mit javascript machen, so dass der Style so angepasst wird dass das Bild an den Seiten abgeschnitten wird.
Funktioniert aber mit z.B. "clip: rect(0px 0px 0px 0px)" in dem Fall wegen dem Positioning nicht.
Eine andere Sinnvolle Art dafür kann ich einfach nicht finden.

[eagle275]

warum willst du hart abschneiden? wäre es nicht sinnvoll Bilder evtl zu skalieren .. und die Divs zu verschieben, dass sie eben nicht zwangsweise nebeneinander liegen?

[ToMbY1234]

Ich habe ein Bild mit einem Seitenverhältnis von 16:9 und es wird vorher ein Bereich markiert in dem der Fokus ( Produkt ) in dem Bild liegt in einem Seitenverhältnis z.B. 4:3 ich weiß nicht genau welches Seitenverhältnis z.B. ein Smartphone im Hochformat hat.
Das 16:9 Bild wird so dem Browserfenster angepasst, dass das Bild so groß ist, dass unten zwei Balken angezeigt werden. (Optische gründe)
Das sieht gut aus.
Jetzt komme ich mit einem Handy und lasse das 16:9 Bild skalieren. Das Bild wird so klein, dass es fast unkenntlich wird und es wird in der höhe auch zu klein um den oben genannten Effekt mit den zwei Balken unten schön darzustellen.
Meine Idee war jetzt das Bild dann in der Breite so abzuschneiden, dass ich mich den vorher definierten 4:3 Bereich nähere.
Es gibt ja auch im Hochformat unterschiedliche breiten z.B. Tablet im Hochformat ist breiter wie Handy im Hochformat.
Mit dem Effekt es an den Seiten abzuschneiden könnte ich egal für welches Format meine Darstellungsart (Slider mit Bild welches 90% der Höhe des Startbildschirms einnimmt, dann ein Balken 5% Höhe und noch ein Balken 5% Höhe).

[drsoong]

Ich finde Deine Beschreibungen schwer zu verstehen. Z. B.

Das 16:9 Bild wird so dem Browserfenster angepasst, dass das Bild so groß ist, dass unten zwei Balken angezeigt werden.

Was denn für Balken? Müssen die überhaupt erwähnt werden, damit wir das Problem verstehen.

Ich meine vage zu verstehen, dass Bilder, die relative Größenangaben haben (Prozent z. B.), bei kleineren Bildschirmen so klein werden, dass man das Dargestellte nicht mehr vernünftig erkennen kann. Du willst die Bilder deswegen bei bestimmten Größenverhältnissen nicht mehr relativ verkleinern sondern Teile des Bildes "abschneiden".

Frage: Benutzt Du viewport Metags für die Darstellung auf Smartphones, Tablets?

Wäre es nicht ein Ansatz - wie oben schon angedeutet - per media query statt prozentualer Größenanpassung, den Bildcontainer mit einer overflow - Anweisung auszustatten.
Du müsstest dann evtl. javascript-seitig eine "Touch-Scroll" Lösung intergrieren, damit Dein Bild-Slider (es gibt übrigens auch noch eine andere Art Slider) nicht durch hässliche Scrollbars verschandelt wird.