JSFiddle - React, Tailwind, and code Playground

HTML

<!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/2800x1600?text=Platzhalterbild"></div>

</body></html>