Tag picture does not work on phones and IE11

Question

Tag picture does not work on phones and IE11

Navigation

#1 by (3 votes)
#2 by (3 votes)

4

I'm working with the <picture> tag to use its responsive function and inserting multiple sizes of the same image into a single object according to the screen resolution by the "media" parameter of the <source> tag. In chrome and Mozilla Firefox the results were perfect but in cell phones and IE11 did not work, they are just using the image in the tag <img> follows an example of the error:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="erro.css">
</head>
<body>
		<a id="capa-individual" href="individual.html">
			<picture>
    			<source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
    			<source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
    			<img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg"alt="">
			</picture>
		</a>
	
</body>
</html>

html css

asked by anonymous 19.02.2016 / 00:17

2 answers

3

The picture element is not supported in IE11, you can check which browsers it supports in: link .

What you can do to make IE11 support it is to use a polyfill, which are javascripts libraries that simulate the behavior of new features in old browsers:

A polyfill for the picture could be the link

Add this code to your page for the picture polyfill to work:

<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js"async></script></head>

Codepenexample: link

24.02.2016 / 15:01

Larger and smaller number Split by character | does not return all expected elements

score 3 · Accepted Answer

The <picture> element is not supported in Safari for iOS and IE11. You can check this at link .

An alternative is to use the srcset and sizes attributes, 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.