Media query on html

Question

Is there a way to use media query on html? I need to put a image like a banner centralized on my page, when the screen it's less than 768px it's shows a smaller image but when the screen grows to more than 768px it should replace the smaller image to another image that I have that is bigger. Is there a way to make this only on html and inline css? I should'nt use an external file.

Answer 1

You can achieve this using inline CSS:

<div style="text-align: center;">
  <img src="small-banner.jpg" alt="Small Banner" style="max-width: 100%;">

  <style>
    @media (min-width: 768px) {
      img {
        content: url(large-banner.jpg);
      }
    }
  </style>
</div>