Images
@sgroup/tailwind-plugins/images
Images are responsive by default.
<img src="https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?auto=format&fit=crop&w=1400&q=80" alt="Responsive image">
Background Images
Images can be applied to background of elements, and there are helper classes to make this easier for you. Typically, these implementations should combine with lazyloading. These also require the use of aspect ratio helpers or a fixed height.
Cover
Using .img-cover will fill the image to the container dimensions.
<div class="img-cover aspect aspect-21x9" style="background-image: url('https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?auto=format&fit=crop&w=1400&q=80');"></div>
Contain
Using .img-contain will constrain the image to the container dimensions.
<div class="img-contain aspect aspect-21x9" style="background-image: url('https://images.unsplash.com/photo-1468276311594-df7cb65d8df6?auto=format&fit=crop&w=1400&q=80');"></div>