Bild als Maske benutzen

[Knautschke]

Hi.

Ich bastel gerade eine kleine Website, auf der man Bilder hochladen und diese rudimentär bearbeiten kann (im Moment erst einmal nur: Position festlegen und skalieren). Wenn der User nun das Bild größer skaliert, als eigentlich Platz ist (so dass es in andere Elemente der Website hineinragt), dann würde ich das Bild gerne an der Stelle "abschneiden" bzw. nicht anzeigen. Sozusagen eine Maske benutzen, damit der User das Bild so pixelig haben kann wie er will, ohne dass das Bild eine sichtbare Größe überschreitet.

Eine Maske ist in CSS nur möglich, wenn das zu maskierende Bild ein Hintergrundbild ist, wenn ich mich recht erinnere, oder? D.h. das Bild müsste dann über "background-size" (anstatt "width" und "height") skaliert werden, und über "background-position" (und natürlich "no-repeat") positioniert werden? Oder irre ich mich da?

Danke für jegliche Tipps.

[miniA4kuser]

Das Bild in einen Container mit max-width und max-heigth legen und overflow hidden maskieren.

[Knautschke]

Ach, klar, mit overflow hidden. Manchmal steh ich auch echt auf dem Schlauch. Danke.