Rahmen um automatisch skaliertes Bild

[Matthias Apsel]

Hallo Stefan Einspender,

auch ich habe mit flexbox zentriert, habe allerdings mit der Farbe des div-Elements sehr getrickst.

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: 200px solid blue;
  outline: 2px solid red;
  outline-offset: -187px;
}

wenn das Bild verkleinert werden muss und die proportionen nicht mehr stimmen, wird allerdings der Abstand der roten Linie zum Bild ggf. größer als gewünscht.

Warum soll der Abstand eigentlich genau 13px sein?

Bis demnächst
Matthias