How do I display some other image disabling another depending on screen resolution?-CodePudding

I wanted to display a different image for resolution 800px and a different one for resolution greater than 800px. How do I do that?

I am adding the code which I have written. (It's just for adding image on the page). This is the code for my main image means for all resolution.

<img src={alexagif} style={{ minWidth: "100%" }} />

CodePudding user response：

What you're looking for is responsive images.

For example, from MDN:

<img srcset="elva-fairy-480w.jpg 480w,
         elva-fairy-800w.jpg 800w" 
 sizes="(max-width: 600px) 480px, 
        800px"
 src="elva-fairy-800w.jpg"
 alt="Elva dressed as a fairy">

In the example, the first line would be the smaller version of your image. The second is defining the larger image that should be rendered, and "sizes" is where you define the document width break-point for the images to switch. The final line is your original image/fallback source

Another way of handling this would be with swapping background-images using @media queries in your CSS/stylesheets.

CodePudding user response：

You can use the <picture> tag as follows:

<picture>
  <!--source for screens larger than 800px-->
  <source media="(min-width:800px)" srcset="https://images.unsplash.com/photo-1659447055750-4a85ffdf119e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MDQ1NjI3NQ&ixlib=rb-1.2.1&q=80&w=1080">
  <!--source for default screens (smaller than 800px) -->
  <img src="https://images.unsplash.com/photo-1660337157394-7528d18332a9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY2MDQ1NjIyMA&ixlib=rb-1.2.1&q=80&w=1080"> 
</picture>