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 {
}
.a .b {
    display: table;  /* shrink-wrap to content (= the image) */
    width:   300px;  /* content width, acts as min-width when display:table */
    margin:  0 auto; /* center inside the (2*9999+300)px area */
}