Übergroßes Bild zentrieren und beschneiden

[T-Rex]

Moin,

jetzt hab ich doch mal ein css Problem :(.
Hab da ein Bild. Das Bild hat eine unbekannte Größe. Damit man es sich besser vorstellen kann nehmen wir mal an das Bild ist 200 x 200 Groß. Jetzt sollen lediglich 100 x 100 des Bildes angezeigt werden und zwar aus dem Zentrum heraus. Sprich der Rand wird beschnitten.

Eigentlich würde ich so ein Konstrukt benutzen:
<div class='parent'>
<img src='example.jpg' />
</div>

Und folgende Styles:
.parent
{
height: 100px;
width: 100px;
overflow: hidden;
}

.parent img
{
margin-top: -50px;
margin-left: -50px;
width: 200px;
height: 200px;
}

Da ich aber wie eingangs erwähnt nicht weiß wie groß das Bild ist, kann ich margin-top und margin-left nicht angeben.

Gruß
text-align: right
                                                                     T-Rex

[Ulysses]

Hi!

Jetzt sollen lediglich 100 x 100 des Bildes angezeigt werden und zwar aus dem Zentrum heraus.

Als Hintergrundbild wäre das doch einfach möglich...

FG Ulysses

[suit]

Als Hintergrundbild wäre das doch einfach möglich...

Du meinst einfach in Browser, die background-size ordentlich unterstützen (zumindest das Schlüsselwort "cover").

Noch dazu: wenn das Bild nun Inhalt ist, gehört es nicht ins CSS.

[Gunnar Bittersmann]

@@suit:

nuqneH

Du meinst einfach in Browser, die background-size ordentlich unterstützen (zumindest das Schlüsselwort "cover").

Nein, meint er nicht: „der Rand wird beschnitten“. [OP]

Noch dazu: wenn das Bild nun Inhalt ist, gehört es nicht ins CSS.

Ja, das wäre zu klären.

Qapla'

[T-Rex]

Noch dazu: wenn das Bild nun Inhalt ist, gehört es nicht ins CSS.

Ja, das wäre zu klären.

Das Bild ist sowas von Inhalt! Es handelt sich um eine Kunstgallerie Seite und die Bilder sind die Kunstwerke.
Als Background kommen die Bilder zudem nicht in Frage, da es laut Designvorschau eine Spiegelung des Bildes geben soll. Und da im Moment nur der Chrome das praktische "reflect" css3 Ding unterstützt muss es ein img sein, welches dank JS Klasse und Canvas gespiegelt wird. (Wobei, wenn die Idee der Zentralisierung bestehen bleibt, frage ich mich ob die Bilder noch vernünftig gespiegelt werden...)

Gruß
Vordergrund
T-Rex

[suit]

welches dank JS Klasse

Wie siehts dann mit Zentrieren per JS aus?

Oder wenn du die Bilder serverseitig auf dieselbe Breite rechnest, dann kannst du sie auch entsprechend zentrieren und beschneiden.

[T-Rex]

welches dank JS Klasse

Wie siehts dann mit Zentrieren per JS aus?

Oder wenn du die Bilder serverseitig auf dieselbe Breite rechnest, dann kannst du sie auch entsprechend zentrieren und beschneiden.

Ja drauf wird es hinauslaufen.
Generell werden wir die Bilder ab jetzt über ein PHP Script jagen. Dass kann zudem das Wasserzeichen einbauen. Das PHP wird dann das Bild entsprechend beschneiden.

Dennoch würde mich eine css Lösung interessieren.

@ Gunnar:
Generell hast du recht mit der Aussage das JS niemals eine Antwort auf Layout Probleme ist. Dennoch muss man anscheinend ab und an darauf zurück greifen, wenn die Browser irgendwelche Effekte nicht unterstützen.
Bezüglich der 2D-Transformationen ist das eine super Idee. Das werde ich mal ausprobieren! (Generell hab ich in letzter Zeit das Gefühl, dass "transform" die Antwort auf all meine Fragen ist...)

Danke an alle Helfer

Gruß
3D
T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Als Background kommen die Bilder zudem nicht in Frage, da es laut Designvorschau eine Spiegelung des Bildes geben soll. Und da im Moment nur der Chrome das praktische "reflect" css3 Ding unterstützt muss es ein img sein, welches dank JS Klasse und Canvas gespiegelt wird.

JS?? Canvas?? Für eine Spiegelung?

Alle gängigen Browser können bereits ohne sowas spiegeln: mit 2D-Transformationen bzw. IE mit seinen proproetären Filtern.

Wann immer die Lösung auf ein Darstellungsproblem JavaScript heißt, ist die Lösung höchstwahrscheinlich falsch.

Qapla'