Rahmen um automatisch skaliertes Bild

[Rolf B]

Hallo Stefan,

mein bester Versuch ist bisher

div {
  height: calc(100vh - 200px);
  width: calc(100vw - 200px);
  margin-top: 100px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #009;
}

img {
  max-height: 100%;
  max-width: 100%;
  padding: 13px;
  box-sizing: border-box;
  border: 2px solid red;
}

Allerdings hat die Freude ein Ende sobald das div breiter ist als das Bild. Solange das Bild groß genug ist, funktioniert es. Ist das div zu breit, nimmt das Bild bei genügend viel Höhe nicht mehr die ganze Breite ein.

Ob man es mit grid besser hinbekommt - keine Ahnung.

Die Notlösung wäre JavaScript und ein resize-Handler, aber darauf würde ich verzichten solange es irgendwie anders geht.

Rolf