JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
<img src="" style="width:60px;height:60px;" />
</div>
CSS
img {
float: left;
margin: 0;
}
JavaScript
var IMG_WIDTH = 60;
window.onresize = function() {
var width = document.getElementById('container').offsetWidth;
if (width % IMG_WIDTH != 0) {
var imgElements = document.querySelectorAll('#container img');
Array.prototype.forEach.call(imgElements, function(el, i){
el.style.width = width / Math.floor(width / 60) + 'px';
el.style.height = width / Math.floor(width / 60) + 'px';
});
}
};
window.onresize();