JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner small">
        <img src="http://lorempixel.com/g/500/300/nature/"></img>
    </div>
</div>
<div class="outer">
    <div class="inner large">
        <img src="http://lorempixel.com/g/500/300/nature/"></img>
    </div>
</div>

CSS

img {
    width: 100%;
}
.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;
}