<div class="wrapper">
<img src="https://placekitten.com/200/400" />
</div>
*{
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
padding:0;
margin:0;
}
body{
display:flex;
overflow:hidden;
}
.wrapper{
width: 100%;
height: 100%;
background-color:yellow;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.wrapper img{
width: 100%;
height: 100%;
object-fit: contain;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.