Estou a trabalhar com a tag <picture>
para usar sua função responsiva e inserindo diversos tamanhos da mesma imagem num único objeto conforme a resolução da tela pelo parametro "media" da tag <source>
. No chrome e no Mozilla Firefox os resultados foram perfeitosm mas nos celulares e IE11 nao funcionou, estão apenas usando a imagem na tag <img>
segue um exemplo do erro:
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>