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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

joergi

Neues Mitglied
10 Juli 2012
19
0
1
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:

HTML:
<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 :smile:
 

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net
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 ?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.509
297
83
66
An die Möglichkeit mit einem zusätzlichen Container und object-fit dachte ich auch zunächst und habe ganz naiv dies gemacht:
Aber wie man sieht, ignoriert der Rand die angepasste Größe des Bildes :mad:

Da wusste ich mir nur noch zu helfen, indem ich die Größe mit Javascript berechnet habe :D:
(das Load-Event funktioniert irgend wie nicht bei jsfiddle, aber beim Resize funktioniert es:)
 

joergi

Neues Mitglied
10 Juli 2012
19
0
1
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 :smile:
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.505
222
63
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.
 
Werbung: