Search code examples
htmlcsstailwind-css

How can I make the same design with the adaptability of the img tag for different screens with the 'sizes' method, but only on tailwind

Please help me! How can I make the same design with the adaptability of the img tag for different screens with the 'sizes' method, but only on tailwind, here is a photo.image1

additionally, I have a photo with screen sizes in the tailwind config file image2

Solution

  • The sizes attribute is a hint to the browser. It is a way for the web page author to let the browser know the size you anticipate an image to be under certain media query conditions. We don't have enough information to be able to give appropriate suggestions for the <length> parameters, but if you want the queries to match up with your Tailwind configuration, you'd do something like:

    <img
  …
  sizes="
    (min-width: 1200px) <length>,
    (min-width: 960px) <length>,
    (min-width: 768px) <length>,
    (min-width: 640px) <length>,
    <length>
  "
/>

    As per this SO answer, the first matching value is used, so you'd want to declare each value in descending min-width order.