JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div class="mainG mainGT">
<div class="rawV">
<div class="svs"></div>
<div class ="drgM"><img src="http://www.phoronix.net/image.php?id=0x2014&image=nvidia_980_1_med" /></div>
</div>
</div>
</div>
CSS
#wrapper{
height:350px;
border: 2px solid green;
}
.mainG{
position: relative;
left: 0;
right: 0;
margin: 0 auto;
width: 99%;
border: 2px solid red;
}
.mainGT{
height:70%;
}
.rawV{
position: absolute;
margin: 0 auto;
width: 95%;
height: 95%;
border: 2px solid blue;
}
.svs{
position: absolute;
width: 100%;
height: 100%;
border: 2px solid cyan;
top:0px;
left:0px;
box-sizing:border-box;
}
.drgM{
width: 100%;
height: 100%;
border: 2px solid brown;
box-sizing:border-box;
}
.drgM img {
height:100%;
width:auto;
}
}