JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div class="window-size"></div>

<img class="embed-responsive-item" sizes="(min-width: 600px) 25vw, (min-width: 400px) 33.3vw, 50vw" srcset="
https://placehold.it/100x100 100w,
https://placehold.it/200x200 200w,
https://placehold.it/300x300 300w,
https://placehold.it/400x400 400w,
https://placehold.it/500x500 500w,
https://placehold.it/600x600 600w">

<div class="img-size"></div>

CSS

body {
  padding: 0;
  margin: 0;
}

img {
  width: 50vw;
}
@media (min-width: 400px) {
  img {
    width: 33.3vw;
  }
}
@media (min-width: 600px) {
  img {
    width: 25vw;
  }
}

.window-size {
  text-align: center;
  margin: 20px 0;
  padding-top: 5px;
  border-top: 2px solid #666;
}

JavaScript

function showSize() {
    $('.window-size').text($(window).width() + 'px');
		$('.img-size').text($('img').width() + 'px @ ' + window.devicePixelRatio + 'x');
}

$(function() {
		showSize();
    $(window).on('resize', showSize);
});