Jump to content

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

webdeveloper123

By webdeveloper123
in CSS Help

 Share
Go to solution Solved by maxxd,

Recommended Posts

webdeveloper123 Advanced Member

webdeveloper123

Posted
Posted

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?

  • Solution
maxxd Prolific Member

maxxd

Posted
  • Solution
Posted

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 Advanced Member

webdeveloper123

Posted
  • Author
Posted
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

Barand Prolific Member

Barand

Posted
Posted

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

maxxd Prolific Member

maxxd

Posted
Posted (edited)

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 by maxxd

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.