JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div class="imageContainer">
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

<div class="imageContainer">
    <span><img src="http://dummyimage.com/80x100/f0f/fff" /></span>
</div>

<div class="imageContainer">
    <span><img src="http://dummyimage.com/120x100/f0f/fff" /></span>
</div>

<div class="imageContainer">
    <span><img src="http://dummyimage.com/280x100/f0f/fff" /></span>
</div>

CSS

body {
    margin: 0 150px;
}
.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
    width: 1000px;
    margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
    display: inline-block;
}