JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="row" id="images">
<div class="col-md-3">
<img id="img1" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
<img id="img2" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
<img id="img3" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
<img id="img4" src="http://farm4.staticflickr.com/3680/13191485343_88d5da5123.jpg">
</div>
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded", calculate, false);
window.addEventListener("resize", calculate, false);
function calculate() {
var imgs = document.querySelectorAll(".col-md-3 img");
var count = imgs.length;
var wid = Math.floor(window.innerWidth/count);
for(i=1; i<=imgs.length; i++) {
document.getElementById('img'+i).style.width=wid+'px';
}
}
</script>
CSS
.col-md-3 img {
float:left;
}
body {
margin:0px;
}