Using Picture element to choose which image to display according to screen size

webdeveloper123 · April 4

Hi Guys,

Got a bit of a problem here. I'm building a website for a fictional restaurant so I can practice my RWD. All is going well apart from now I want to choose which image to display on different screen sizes. At the beginning I had this code:


<div class="col-3 hide-border">
  <a href="history.html"><img class="copa" src="images/outside-copa.webp"></a>
  <div class="content">
    <h1>Our History</h1>

  </div>

</div>

With this styling:

.copa {
     width: 100%;
  height: auto;
}

All was fine on both devices, apart from on the mobile the image looked a bit small. On the desktop it looked great. So I photo edited the same image, but scaled it to a size where it would look better on the mobile. So after that I had to use picture element to choose which image to display.

Here is the code:


<picture>
  <source class="copa" media="(max-width: 450px)" srcset="images/outside-copa-edit.webp">
  <source class="copa" media="(min-width: 768px)" srcset="images/outside-copa.webp">
  <img src="images/manutd.webp">
</picture>

It seems to work, but it will not pick up the .copa style class from the css file. So I read around and someone said put it on the picture element (even though the source element supports the class attribute.)

So I did this:

<picture class="copa" >
  <source  media="(max-width: 450px)" srcset="images/outside-copa-edit.webp">
  <source media="(min-width: 768px)" srcset="images/outside-copa.webp">
  <img src="images/manutd.webp">
</picture>

with this styling for .copa :

.copa {
  width: 100%;
  height: auto;
  background-color: red;
}

I did intentionally put background red for development/testing purposes so I know instantly if the style is being picked up. It only picks up the red colour, not the other 2 styling properties.

Can someone help please?

webdeveloper123 · April 4

are the images stacked on top of each other?

maxxd · April 5

If I remember correctly, you need to add the class attribute to the <img> tag. The picture tag is a container, and the source elements replace the inner image tag at the defined breakpoints.

webdeveloper123 · April 5

9 hours ago, maxxd said:

If I remember correctly, you need to add the class attribute to the <img> tag.

I don't have img tags. Well I have one,

21 hours ago, webdeveloper123 said:
  <img src="images/manutd.webp">

But that's just a fall back option if the other 2 don't load. I only put it in there because they guy who wrote the css and html5 book I bought strongly recommended that this img tag is not omitted

So what am I supposed to do, repleace source with img tags? Is that even valid code?

Thanks

webdeveloper123 · April 5

oh wow, I did it!
Thanks maxxd!

Barand · April 5

Simple method using a couple of classes (See https://dev.to/alexandrefreire/bootstrap-4-hiding-elements-in-responsive-layout-3g25)

Code

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div >
        <img src='no_photo.jpg' border='0' width='102' height='104' alt='no_photo.jpg (2,382 bytes)' class='d-block d-md-none'>
        <img src='parrots.JPG' border='0' width='397' height='191' alt='parrots.JPG (22,358 bytes)' class='d-none d-md-block'>
    </div>
</body>
</html>

Output width = 420

image.png.d89f4f15b353ae320cbe19b6f0c3c4f5.png

Output width = 800

image.png.b581c54ea181c4668f43148c8c420b99.png

webdeveloper123 · April 5

Thanks Barand!

maxxd · April 8

The image tag is the main element in this situation - it's wrapped in a picture tag (the container), and the src elements can be thought of in the same way that media queries are in css. You need to have the img tag in the picture element to actually display the image source as defined by the src elements depending on their media attribute.

Basically, in your situation the <img> tag is the only actual element in the structure. The rest of it is conditionals.

Edited April 8 by maxxd

Sign In

Using Picture element to choose which image to display according to screen size

Recommended Posts

webdeveloper123

Link to comment

Share on other sites

webdeveloper123

Link to comment

Share on other sites

maxxd

Link to comment

Share on other sites

webdeveloper123

Link to comment

Share on other sites

webdeveloper123

Link to comment

Share on other sites

Barand

Link to comment

Share on other sites

webdeveloper123

Link to comment

Share on other sites

maxxd

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information