nicht angemeldet
Hallo,
nachfolgend ein kurzer Quelltext. Der blaue Kasten verändert seine Größe in Abhängigkeit von der Größe des Browserfensters. Das Bild im blauen Kasten wird automatisch so skaliert, dass es den blauen Kasten bestmöglich ausfüllt, allerdings werden die Bildproportionen dabei nicht verändert.
Und die Frage ist jetzt, wie kann ich es realisieren, dass dort rote Rahmen direkt um das Bild (mit 13 Pixel Abstand) erzeugt wird. Aktuell ist der der Rand des blauen Kastens, was so nicht sein soll.
<!doctype html><html lang="de"><head><meta charset="utf-8"><title>test</title>
<style>
div {
height: calc(100vh - 200px);
width: calc(100vw - 200px);
margin-top: 100px;
margin-left: 100px;
background: #009;
}
img {
height: calc(100% - 30px);
width: calc(100% - 30px);
object-fit: contain;
padding: 13px;
border: 2px solid red;
}
</style>
</head><body>
<div><img alt="" src="https://via.placeholder.com/700x400?text=Platzhalterbild" height="400" width="700"></div>
</body></html>
Vielleicht hat da ja jemand von Euch eine Idee, vielen Dank 😀
Viele Grüße, Stefan
Rolf B
Henry
Matthias Apsel
Tabellenkalk
Gunnar Bittersmann