XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild mit Rahmen aus Bild (http://xhtmlforum.de/showthread.php?t=51873)

Holger (HMR) 17.05.2008 20:04

Bild mit Rahmen aus Bild
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Zusammen,

ich würde gerne einer Reihe von Bildern automatisch einen Rahmen verpassen,
der sich aus einem Bild erstellt.
Das Bild selber ist eigentlich ein Bild das einen Rahmen darstellt. siehe Anlage.
jetzt habe ich schon einige Lösungen:
1 - Tabellen, ist klar, aber keine Lösung.
2 - Container um das bild legen
3 - Container ineinander verschachteln mit backgroundimages
2. und 3 scheint mir aber sehr aufwendig im html-quelltext.

jetzt habe ich mir gedacht, ich kenn ja die Größe des Image,
und die notwendige breite des Rahmens.

nun habe ich zwei Ideen:
A.
wenn ich das Image jetzt in einen Container packe, dem die breite und höhe des Images zuzüglich die Stärke des Rahmens verpasse, und dem Container nun dies als breite und höhe gebe und den rahmen als backgroundimage,
dann habe ich jetzt nur noch das Problem, das ich die Wiedergabe des vorhandenen Backgroundbildes auf diese Größe einstellen muss.
dazu konnte ich nichts finden. geht das???

optional könnte ich natürlich per php das Rahmenimage neu definieren,
das raubt aber zu viel Ressourcen, dann kann ich das darzustellende Bild gleich mit einem Rahmen versehen.

B.
Ich verpasse dem Image selber ein padding und ein Hintergrundbild,
hab dann aber wieder das Problem, das ich das Hintergrundbild resizen muß.

gibt es eine Möglichkeit sowas zu gestalten:
Code:

background-image: URL('../images/rahmen.png width:80PX;heigth:170 px;');
oder kennt jemand eine Möglichkeit einem Border-Anweisung ein image zu verpassen? ich meinte, ich hab das mal irgendwo gesehen, kann es aber nciht wieder finden.

Hat da wer eine Idee zu???
Vielen Dank schon mal für das lesen.

Timo 17.05.2008 20:50

Code:

img.rahmen {
    background-image: url('../images/rahmen.png');
    background-repeat: no-repeat;
    padding: 10px 15px;
}

Code:

<img src="bild.png" class="rahmen" alt="bild mit rahmen">
Du musst halt das Padding anpassen. 1. Wert = Oben / Unten 2. Wert = Rechts / Links

Holger (HMR) 21.05.2008 12:45

Hallo Timo,

danke für den code.
Das würde so gehen, wenn alle Bilder gleich groß sind,
sind sie aber nicht. Auch das Seitenverhältnis ist nicht immer gleich.

Das backgroundimage wird immer in seiner original größe angezeigt.
das muß also resized werden.

Code:

background-image: URL('../images/rahmen.png width:80PX;heigth:170 px;');

Timo 21.05.2008 12:55

ein Hintergrundbild kann man in der größe nicht verändern!

Wenn das aber so ist, brauchst du zusätzlich ein paar Divs um das Bild

Der Code von dir ist nicht valide!


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:41 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020