Rahmen um ein mit "background-size: contain" angepaßtes Bild legen

[joergi]

Hi, ich habe da eine Frage zum contain Befehl. Und zwar möchte ich ein beliebig großes Bild in eine Box mit den Maßen 120 x 40 px einpassen.
Hat das Bild z.B. die Maße 417px x 202 px, so wird das Bild in der Höhe komplett ausgefüllt. Links und rechts gibt es dann natürlich einen
Freiraum. Das ist auch genau dass was ich will. Nun würde ich aber gerne um das Hintergrundbild selbst einen Rahmen von 1px legen.
Das geht aber nicht. Nur um den Rahmen der Box scheint es zu funktionieren. Gibt es evtl. eine andere Möglichkeit dass zu erreichen? Hier der Quellcode:

<style>
.box
{
position: absolute;
width:120px;
height:40px;
background-image: url('bild.png');
background-position: top;
background-size: contain;
background-repeat: no-repeat;
border: 1px solid #000000;
}
</style>
<div class="box"></div>

Danke im voraus für Eure Hilfe

 

[basti1012]

um ein Hintergrunds Bild ein Rahmen legen geht meines wissens nicht.
Mir würde jetzt nur ein zusätzliches div einfallen.
Das würde aber auch nicht so einfach laufen.

Muß es den Background Image sein oder würde img oder figure Element auch gehen ?

 

[joergi]

Hi,
danke für Eure Antworten. Im Endeffekt ist es egal, ob es sich um ein Hintergrundbild handelt , ein img Bild oder ein figure-Element. Ich fand nur die automatische Anpassung des Bildes (contain!) so einfach.

Hmmm, sollte die Umsetzung mittels CSS wirklich nicht möglich sein dachte ich daran, das ganze mittels PHP umzusetzen. Damit kann man ja auch die jeweiligen Bildmaße auslesen und damit eine Art "contain" Befehl nachbauen. Damit könnte das Bild dann auch einen Rahmen haben

 

[MrMurphy]

Im Endeffekt ist es egal, ob es sich um ein Hintergrundbild handelt

Nein, das ist in HTML entscheidend. Ein Hintergrundbild enthält nur schmückendes Beiwerk. Die Informationen der Webseite sind auch ohne die Hintergrundbilder komplett.

Vordergrundgrafiken, in der Regel das img-Element, enthalten jedoch wichtige Informationen zur Webseite.

Elemente in HTML werden grundsätzlich nach dem Inhalt ausgewählt. Und nicht nach der Darstellung, zum Beispiel um eine fette Schrift darzustellen. Da damit früher zum Nachteil der Besucher viel Schindluder getrieben wurde, sind die Regeln dazu in HTML5 enger gefasst worden.

 

[joergi]

Jau, danke für Eure Hilfe