JSFiddle - React, Tailwind, and code Playground

by Charlie Vaughan

HTML

<picture>
    <!--  4 : 3 -->
    <source srcset="https://assets.unileversolutions.com/v1/1774324.jpg?im=AspectCrop=(480,360);Resize=(480,360)" media="screen and (min-width: 320px) and (max-width: 767px)">
    
    <!--  4 : 3 -->
    <source srcset="https://assets.unileversolutions.com/v1/1774324.jpg?im=AspectCrop=(768,576);Resize=(768,576)" media="screen and (min-width: 768px) and (max-width: 991px)">
    
    <!-- 496 : 387 -->
    <source srcset="https://assets.unileversolutions.com/v1/1774324.jpg?im=AspectCrop=(992,744);Resize=(992,744)" media="screen and (min-width: 992px) and (max-width: 1199px)">
    
    <!-- 496 : 387 -->
    <source srcset="https://assets.unileversolutions.com/v1/1774324.jpg?im=AspectCrop=(992,744);Resize=(992,744)" media="screen and (min-width: 1200px)">
    
    <!--  4 : 3 -->
    <img width="480" height="360" src="https://assets.unileversolutions.com/v1/1774324.jpg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Magnum vegano" loading="lazy">
    
</picture>

CSS

html {
  background: #202227;
  padding: 50px;
}

img {
  width: 100%;
  height: auto;
  outline: 1px dotted yellow;
  display: block;
  background: #202227;
}