JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner small" id ="cent">
        <img src="http://lorempixel.com/output/nature-q-g-500-300-2.jpg"></img>
    </div>
</div>
<div class="outer">
    <div class="inner large">
        <img src="http://lorempixel.com/output/nature-q-g-500-300-2.jpg"></img>
    </div>
</div>

CSS

img {
    width: 100%;
}
#cent{
   padding-top:50px;
}
.outer {
    
    height: 300px;
    width: 400px;
    overflow: scroll;
    text-align: center;
}
.inner {
    display: inline-block;
}
.inner.small {
    width: 250px;
    height: 150px;
}
.inner.large {
    width: 500px;
    height: 300px;
}