✔ img wie hinter Passepartout

rernanded

rernanded

Erfahrenes Mitglied
Hi

wie stelle ich es an dass ein img ohne Größenangaben, also 1:1, quasi "hinter einem div erscheint" (div hat Größenangaben) und dabei das div wie ein Bilderrahmen wirkt?
Bei einem div mit width=100% und height=60% würde zB bei landscape ein anderer Bildausschnitt gezeigt als bei Portrait, das Bild selbst würde sich nicht ändern.
Könnte z-index ein Ansatz sein?

MONI
 
rernanded hat gesagt.:
wie stelle ich es an dass ein img ohne Größenangaben, also 1:1, quasi "hinter einem div erscheint" (div hat Größenangaben) und dabei das div wie ein Bilderrahmen wirkt?
Könnte z-index ein Ansatz sein?
Zum Vergrößern anklicken....
z-index regelt lediglich die Schichtposition einzelner Elemente, und "Bilderrahmen" nennt doch schon das gesuchte Werkzeug (CSS-Eigenschaft): border, das sich auch direkt auf <img> anwenden liesse.
 
Zuletzt bearbeitet:
@SpiceLab
Das kenne ich natürlich und habe auch probiert wie es damit gehen kann. Hat aber nicht funktioniert.
Vielleicht gibts Du mal ein Beispiel zu meinen Vorgaben wie ich nun für mein img die Angaben machen muß:
HTML: 
<html>
<head>
<script>
#eins{
width:100%
height:100%;
position:absolute;
top:0%;
left:0%;
}

???

</script>
</head>
<body>
<div id="eins"><img id="erstes" src="images/erstes.jpg" /></div>
oder
<div id="eins"><div id="erstes"><img id="erstes-img" src="images/erstes.jpg" /></div></div>
</body>
</html>
Danke.
MONI
 
Zuletzt bearbeitet:
rernanded hat gesagt.:
Das kenne ich natürlich und habe auch probiert wie es damit gehen kann. Hat aber nicht funktioniert.
Zum Vergrößern anklicken....
Was soll daran nicht funktionieren? Bitte demonstrieren.
rernanded hat gesagt.:
Vielleicht gibts Du mal ein Beispiel zu meinen Vorgaben wie ich nun für mein img die Angaben machen muß:
HTML: 
<html>
<head>
<script>
#eins{
width:100%
height:100%;
position:absolute;
top:0%;
left:0%;

img#erstes {
...
}
}
</script>
</head>
<body>
<div id="eins"><img id="erstes" src="images/erstes.jpg" /></div>
</body>
</html>
Danke.
MONI
Zum Vergrößern anklicken....
Damit was genau dabei herauskommt? :rolleyes:

Sorry, wir sind hier nicht bei "Wünsch' Dir was" o_O

Btw, <script></script> ist da fehl am Platz!
 
Hier meine Anfrage nochmals, ich hoffe verständlicher. Es muß natürlich style heißen und nicht script (SORRY, Flüchtigkeitsfehler beim Auskopieren.)
Stell Dir vor Du hast ein Smartphone und das Display wäre ausgesägt, Du könntest also komplett durchgucken. Jetzt hälst Du ein gedrucktes Foto dahinter.

MONI

HTML: 
<html>
<head>
<style type="text/css">
#eins{
width:100%
height:100%;
position:absolute;
top:0%;
left:0%;
}

???

</style>
</head>
<body>
<div id="eins"><img id="erstes" src="images/erstes.jpg" /></div>
oder
<div id="eins"><div id="erstes"><img id="erstes-img" src="images/erstes.jpg" /></div></div>
</body>
</html>
 
Den Code kenn' ich schon aus Post #3.

Wozu wird überhaupt dieses <div> benötigt?

Für den (Bilder)Rahmen sicherlich nicht zwingend, wenn border oder border-image genutzt wird.

Oder was soll Deiner Meinung nach letztlich den Passepartout bilden?

Und warum gehst Du nicht auf meine Rückfrage bzgl. Deines gescheiterten Versuchs ein?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück