Bild in CSS zuschneiden
Ich habe ein zweispaltiges Raster mit Bildern erstellt, das mit allen Landschaftsbildern funktioniert: Link . Allerdings habe ich ein Porträtbild hinzugefügt, das das Layout wegwirft. Daher möchte ich das Bild "zuschneiden" können, damit die Höhe mit der der anderen übereinstimmt. Ich habe versucht, eine negative Marge zu verwenden , aber es hat keine Wirkung:
%Vor%Ich bin mir nicht sicher, was ich falsch mache. Jede Hilfe wäre willkommen.
Zur Referenz: das ist mein Code .
8 Antworten
Sie müssen auch etwas Höhe in den Behälter legen, wenn nicht, weiß es nicht, wie viel es von dem zeigen sollte, was es innen ist.
Sie können so etwas versuchen.
%Vor% Sie können img s wie folgt zuschneiden:
CSS:
%Vor% Passen Sie die height und width des Containers an, um die Abmessungen des zugeschnittenen img anzupassen und die Menge des negativen margin-top und margin-left am img Element selbst anzupassen, um auszuwählen, welcher Teil von das Bild, auf das zugeschnitten werden soll.
HTML:
%Vor% 
BEARBEITEN: Alternative Lösung für ein 2-Spalten-Raster mit Zeilen fester Höhe:
CSS:
%Vor%HTML:
%Vor%Ich bin mir nicht sicher, was ich falsch mache. Jede Hilfe wäre willkommen.
Ihr Problem ist auf CSS-Selektoren.
%Vor%entspricht einem Bild mit der Hochformat-Ausschnittklasse.
aber das
%Vor%Stimmt mit einem Bild in einem Protrait-Crop-Container überein.
Sie können CSS3 verwenden, um dies sehr elegant in einem einzigen div ohne zusätzliche Container zu handhaben: