Using tag picture

Question

Using tag picture

Navigation

#1 by (3 votes)

0

Good afternoon, I have the following structure:

<picture>
   <source media="(min-width:min-width:1440px)" srcset="img/main_banner_info-1440px+.png">
   <source media="(min-width:min-width:660px)" srcset="img/main_banner_info-660px~1439px.png">
    <img src="img/main_banner_info-320px~659px.png" alt="Informações: IdeaBag, central de ideias programadas">
</picture>

However, when running in the browser, only the <img> element is displayed, regardless of the page size, I checked the urls and they are all correct, but they do not work, I tested the current versions of firefox and chrome. Why does this error occur, and how can I fix it?

html imagem picture

asked by anonymous 28.02.2018 / 21:26

1 answer

What kind of function should I use? [closed] Create a video by javascript

score 3 · Accepted Answer

You have written the contents of the MEDIA attribute twice, this confuses the operation:

min-width:min-width:1440px

Correct:

min-width: 1440px

I believe the MEDIA attribute works equally well with CSS3, so it follows the same pattern to understand responsive pages and the IMG TAG is if none of it can be loaded or the browser does not support this TAG.

Alternative method note:

Source: Tag does not work on mobile phones and IE11

If you want to use mma alternative is the use of the srcset and sizes direct attributes in the img tag, where you can specify different images for different resolutions. According to Can I use ... , the feature is already widely supported ( link ).

Example:

<img src="small.png" 
     srcset="large.png 1280w, medium.png 640w, small.png 320w" 
     sizes="(max-width: 500px) 250px, 500px" 
     alt="">

In srcset , you specify the address of the image and soon after its width in pixels (% with%). In the 1280w attribute, the browser is indicated the breakpoints using a media query and the size that the image will be displayed. The sizes size tells the browser "if (max-width: 500px) 250px, 500px is less than 500px, the image will be 250px wide." If larger, the image will be 500px wide. situation.