.bild-container { width: 94%; /* Nimmt die volle Breite des übergeordneten Elements ein */ width: 100%; /* Nimmt die volle Breite des übergeordneten Elements ein */ height: 100px; /* Fixe Höhe von 100px */ overflow: hidden; /* Schneidet alles ab, was über den Container hinausragt */ } .bild-container img { width: 100%; /* Bildbreite passt sich dem Container an */ width: 99.9%; /* Bildbreite passt sich dem Container an */ height: 100%; /* Bildhöhe wird gestreckt, aber... */ object-fit: cover; /* ...sorgt dafür, dass das Seitenverhältnis stimmt und das Bild den Bereich ausfüllt */ object-position: center; /* Zentriert das Bild im Ausschnitt */ /*border-width:1px; border-style:solid; border: 4px; border: 4px color #000000; ridge #000000;*/ border-width: 1px; border-color: #333333; /*border: 4px solid #333333;*/ /* 5px dicke, durchgezogene Linie in Dunkelgrau */ /*border-radius: 8px;*/ /* Optional: Abgerundete Ecken */ border-radius: ; /* Optional: Abgerundete Ecken */ padding: px; /* Optional: Abstand zwischen Bild und Rahmen */ background-color: #333333; /* Optional: Hintergrundfarbe für den Padding-Abstand */ top: -6px; left: -6px; top: -30px; left: -30px; } .bild-rahmen { display: inline-block; /* Passt die Größe genau an den Rahmen an */ background-color: #ffffff; /* Weißer Hintergrund */ padding: 2px; /* Erzeugt den 2px großen Abstand (oben, unten, links, rechts) */ } .bild-rahmen img { display: block; /* Verhindert unerwünschte Abstände unter dem Bild */ width: 100%; /* Optional: Macht das Bild responsiv */ height: auto; } .eltern-element { width: 100%; /* Beispiel: Passe dies an deine gewünschte Breite an */ } .eltern-element img { width: 100%; /* Zwingt das Bild, die volle Breite des Elternelements zu füllen */ height: auto; /* Sorgt dafür, dass das Seitenverhältnis des Bildes erhalten bleibt */ height: 176px;/* Sorgt dafür, dass das Seitenverhältnis des Bildes erhalten bleibt */ display: block; /* Entfernt unerwünschten Abstand unter dem Bild */ border: 5px solid #ddd; /* Fügt einen 5px breiten, schwarzen Rahmen hinzu */ border: 4px ridge #CCCCFF; box-sizing: border-box; /* Stellt sicher, dass der Rahmen die Gesamtbreite nicht vergrößert */ /* transform: translateX(-4px); Schiebt das Bild um 4px nach links */ translate: -2px -2px; object-fit: cover; /* Schneidet den Überstand ab und behält Proportionen */ } transform: translateX(-4px); /* Schiebt das Bild um 4px nach links */