JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">

<div class="a"><div class="b">
  <img src="http://placekitten.com/100/100">
</div></div>
    
<div class="a"><div class="b">
  <img src="http://placekitten.com/200/100">
</div></div>
    
<div class="a"><div class="b">
  <img src="http://placekitten.com/300/100">
</div></div>
    
<div class="a"><div class="b">
  <img src="http://placekitten.com/400/100">
</div></div>
    
<div class="a"><div class="b">
  <img src="http://placekitten.com/500/100">
</div></div>

</div>

CSS

#content {
    width: 300px;
    margin: 0 auto;
    border: 1px solid blue;
}
.a {
    /* extend image area */
    margin-left :-9999px;
    margin-right:-9999px;
    /* but without scrollbars */
    position: relative;
    left: -9999px;
}
.a .b {
    /* undo scrollbar-removing positioning */
    position: relative;
    left: 9999px;

    background: yellow;
}
.a {
    /* center content (= the image wrapped into .b) */
    text-align: center;
}
.a .b {
    display:    inline-block; /* shrink-wrap to content (= the image) */
    min-width:  300px;        /* content width */
    text-align: left;         /* if image is smaller than the content */
}