Stefan Einspender: Rahmen um automatisch skaliertes Bild

Beitrag lesen

Hallo Matthias,

also vielleicht stelle ich mich wirklich an, mein Quelltext sieht dann wie folgt aus:

<!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;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: blue;
  border: medium solid red;
  padding: 1rem;
}

	</style>

</head><body>

	<div><img alt="" src="https://via.placeholder.com/700x400?text=Platzhalterbild" height="400" width="700"></div>

</body></html>

Der blaue Bereich (hier das img) füllt das div nicht aus. Und sobald das Bild sich verkleinert, liegt der rote Rahmen nicht mehr am Bild an.

Habe da nicht den Überblick, gibt es sowas wie jsfiddle, wo ich Euch ohne Anmeldung mal den Quelltext reinkopieren und ihr ihn auch ändern könnt?

Viele Grüße, Stefan