JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<img id="bild"src="https://dummyimage.com/600x400/cccccc/ffffff.jpg"> 
</body>

CSS

body{
  /* center all content, needs changes with more contents then one */
  display:flex;
  align-content:center;
  align-items:center;
  justify-content:center;
  /* force full height of body */
  min-height:100vh;
  /* reset default browser behaviour */
  margin:0;
}
/* rule for all image elements */
img{
  /* reset default browser behaviour */
  display:block;
  margin:20px;
}
/* rule the element with id "bild" */
#bild{
  /* 
   * image measurements help to shrink the image 
   * calculation includes margin and border with
   * (2x20)+(2x15)=70
   * so may need to be changed if one of the other values changes
   */
  max-width:calc(100vw - 70px);
  max-height:calc(100vh - 70px);
  border:15px solid #123456;
}