Mr.Murphy: Rahmen um automatisch skaliertes Bild

Beitrag lesen

Aus der unklaren Beschreibung und den bekannten CSS-Angaben vermute ich dass ein zentriertes Bild mit einem Rahmen, der 13px Abstand vom Bild haben soll, das Ziel ist.

Erst mal sollten die Attribute aus dem img-Element entfernt werden, zumal die nur Probleme verursachen, also:

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

und dazu folgendes CSS:

div {
   background: #009;
   width: calc(100% - 200px);
   margin: 100px auto;
   display: flex;
   justify-content: center;
   align-items: center;
}
img {
   display: block;
   max-width: 100%;
   padding: 13px;
   border: 2px solid red;
   margin: 30px;
}