Estou a trabalhar com a tag picture para usar suas função responsiva e inserindo diversos tamanhos da mesma imagem. No chrome e no Mozilla Firefox os resultados foram perfeitos mas nos celulares e IE11 nao funcionou, esta apenas usando a imagem na tag `<img>` segue o codigo. <!-- binsira o código aquiegin snippet: js hide: false --> <!-- language: lang-css --> @charset "UTF-8"; *{ margin:0px; padding:0px; } /*-------------------------------------- HTML - BODY ----------------------------------*/ html, body{ font-family: 'Poiret One', cursive; background-image: url("../imagens/backgroundvinho2.png"); background-attachment: fixed; width:100%; /*1280px*/ font-size: 16px; padding: 0px; margin:0px; } /*---------------------------------BRASA AGORA------------------------------------------*/ div#brasa-agora{ width:8.571875%; /*111px*/ padding:0.4% 0px; float:left; margin-top:0.890625%; margin-left:.7%; border-radius:8px; box-sizing: border-box; box-shadow: 0px 0px 10px 1px #ff0000; border:3px solid rgba(62,2,1,.5); background-color:rgba(0,0,0,.2); z-index: 1; } div#brasa-agora img{ margin-left:3%; float:left; width:100%; z-index: 1; } div#brasa-agora:hover{ box-shadow:0px 0px 1px 2px rgba(255,255,255,.7); -webkit-transition: all .2s ease-in; background:rgba(255,255,255,.1); } /*------------------------------ CAROUSEL TOPO ------------------------------------------*/ #owl-carousel #owl-theme{ z-index: 1; } #carousel{ width: 90%; float: right; z-index: 1; } #container{ position: relative; display: block; box-sizing: border-box; padding-top: 12px; z-index: 2; } div a img { z-index: 2; border-radius: 4px; } #carousel span{ position: relative; display: block; font-family: 'Bad Script', cursive; font-size: 16px; line-height: 1.2; color: white; margin-top:10%; padding-top: 10px; padding-bottom: 5px; text-align: center; border-radius: 5px; opacity: 0; background:; } #carousel a{ text-decoration: none; } #carousel img:hover{ z-index: 2; box-shadow: 0px 0px 1px 2px white; -webkit-transition: all .2s ease-in; border-radius: 3px; } #carousel a:hover span{ opacity: 1; -webkit-transition: all .3s ease-in; } /*------------------------------------------ LOGO -----------------------------------*/ div#cabecalho{ position: relative; clear: both; display: inline-block; width:100%; margin-top:-2%; background:; } picture.logo { position: relative; display: inline-block; margin-left: 6%; width:auto; } /*----------------------------------- CHAMADAS CABEÇALHO----------------------------------*/ div#video{ position: relative; width: 13%; display: inline-block; float: right; text-align: center; margin-right: 5%; margin-top: 2%; padding: 4% 0% 2% 0%; background: url(../imagens/video_chamada.png) no-repeat center; background-size: 70%; -webkit-transition: background-image .5s ease-in-out; -moz-transition: all .3s linear; } div#video:hover{ background-image: url('../imagens/video_chamada_deslize.png'); background-size:70% auto; } div#video a{ opacity:0; } /*----------------------------------- CAPA PRINCIPAL ----------------------------------*/ a#capa-individual{ width: 85%; position: relative; display: block; margin-top: 3%; margin-right: auto; margin-left: auto; margin-bottom: 3%; border-radius: 5px; background-color:; text-align: center; box-sizing: border-box; box-shadow:; border: 30px solid rgba(255,0,0,.3); box-shadow: 0px 0px 10px 1px #000000; } .foto1{ width: 100%; vertical-align: middle; text-align: center; border-radius: 5px; border: 0px solid rgba(0,0,0,.7); } /*--------------------------- CHAMADAS VERIFICADO E SELOS ------------------------------*/ div#chamada_verificado{ float:left; width:41.578125%; padding:4.990625% 0px; margin-left:5.7109375%; margin-top:3.125%; background-image:url("../imagens/chamada_verificado_novo.jpg"); background-color:rgba(0,0,0,.3); background-size:100% auto; box-shadow:5px 5px 3px rgba(0,0,0,.6); border:1px solid #8b4b4b; border-radius: 10px; } div#chamada_calendario{ float:left; width:41.578125%; padding:4.990625% 0px; margin-left:4.7109375%; margin-top:3.125%; background-image:url("../imagens/chamada_calendario_trans.jpg"); background-size:100% auto; box-shadow:8px 8px 3px rgba(0,0,0,.6); border:1px solid #b66f6f; border-radius: 10px; } /*----------------------------------------- PASSARELA ------------------------------*/ div.passarela{ width:100%; float:left; margin:2.325% 0px 0% 0px; background-color:; } div.passarela img{ width:100%; padding:7.015625% 0px 6.015625% 0px; } div.passarela img:hover { -webkit-transform:scale(1.1); -webkit-transition: all .2s ease-in; } /*------------------------------------------- ICONES ------------------------------*/ div#tabela_principal{ clear: both; display: inline-block; width: 100%; box-shadow: 0px 0px 20px 4px black; margin-top:3%; margin-bottom: 2%; padding-top: 2%; padding-bottom: 1%; background-image: url("../imagens/backgroundvinho2.png"); } div#tabela_icones{ width: 80%; margin-left:auto; margin-right: auto; text-align: center; margin-bottom: 2%; background-color:; } div#tabela_icones div{ width: 10%; display: inline-block; margin-left: 2%; margin-right: 2%; margin-top: 2%; text-align: center; vertical-align: middle; border-radius: 100%; background-color:rgba(0,0,0,.3); border:1px solid #884949; box-shadow:3px 3px 10px 2px black; background-color:; } div#tabela_icones div:hover { cursor: pointer; -webkit-transform:scale(0.9); -webkit-transition: all .1s ease-in; box-shadow:0px 0px 5px 1px white; background-color:rgba(117,106,106,.4); } div#tabela_icones img{ width:100%; background-color:; text-align: center; vertical-align: middle; } div#tabela_texto{ width: 80%; margin-left:auto; margin-right: auto; text-align: center; margin-bottom: 1%; background-color:; } div#tabela_texto div{ width: 10%; display: inline-block; margin-left: ; text-align: center; vertical-align: middle; border:1px solid rgba(0,0,0,0); margin-left: 2%; margin-right: 2%; background-color:; } div#tabela_texto span{ color: #dbbebe; background-color:; font-family: 'Bad Script', cursive; font-size: 17px; letter-spacing: 1px; font-weight: bold; } div#tabela_texto span:hover { text-shadow:0px 0px 30px white; color: #dfc3c3; } /*------------------------------------- LOCALIDADE -------------------------------*/ div#container-localidade{ position: relative; display: inline-block; clear: both; width: 100%; text-align: center; background:; margin-top: 1%; margin-bottom: 2%; vertical-align:top; } nav#menu_localidade{ position: relative; display: inline-block; list-style-type: none; width: 270px; text-align: center; padding: 1% 1% 1% 1%; background:; border-radius: 10px; padding: 1.5%; z-index: 2; } nav#menu_localidade li{ width: 90%; position:relative; float: left; list-style: none; padding: 4%; font-family: 'Poiret One', cursive; color: #e4d6d6; font-size: 17px; background-color:; z-index: 2; } nav#menu_localidade li a{ font-family: 'Poiret One', cursive; font-weight: bold; font-size: 13px; color:#ffffff; text-decoration: none; } nav#menu_localidade li#escolher_localidade{ width: 100%; display: inline-block; color: #efe2e2; font-family: 'Poiret One', cursive; font-size: 20px; border-radius: 7px; padding:5px 0% 5px 0%; letter-spacing: 1px; text-align: center; cursor: default; box-shadow: 0px 0px 8px 1px #cf1010; border:2px solid rgba(62,2,1,.5); background-color: rgba(0,0,0,.2); } nav#menu_localidade li ul{ width: 120%; position: absolute; left: -15%; margin-top:7%; background-color: rgba(0,0,0,.8); display: none; padding: 5%; border-radius: 4%; } nav#menu_localidade li ul span{ color: gray; cursor: default; font-size: 13px; font-weight: bold; padding-top:0%; font-weight: bold; } nav#menu_localidade li.regiao{ padding: 1.5%; margin-left: 4% } nav#menu_localidade li ul li{ border-bottom: 1px solid black; display: block; } nav#menu_localidade:hover ul, nav#menu_localidade li:hover ul, nav#menu_localidade li ul li:hover ul, nav#menu_localidade li.over ul, nav#menu_localidade li ul li.over ul{ display: block; } #menu_localidade a li:hover{ background-color: rgba(0,0,0,.3); } /*------------------------------- GALERIA PRINCIPAL ----------------------------------*/ ul#galeria_principal { width:100%; float:left; list-style:none; text-align:center; background-color:; margin-bottom: 4%; } ul#galeria_principal a{ display:inline-block; width:42.96875%; padding:11.71875% 0px; border:0px solid ; margin:1.5625%; background-color: #ffffff; box-shadow:0px 0px 0px 7px rgba(255,255,255,.5); border-radius: 5px; } ul#galeria_principal a#foto_01{ background-image: url('../imagens/chamada_camila.jpg'); background-size:100% auto; } ul#galeria_principal a#foto_02{ background-image: url('../imagens/chamada_patricia.jpg'); background-size:100% auto; } ul#galeria_principal a#foto_03{ background-image: url('../imagens/chamada_rafaela.jpg'); background-size:100% auto; } ul#galeria_principal a#foto_04{ background-image: url('../imagens/chamada_marta.jpg'); background-size:100% auto; } ul#galeria_principal a#foto_05{ background-image: url('../imagens/chamada_paloma.jpg'); background-size:100% auto; } ul#galeria_principal a#foto_06{ background-image: url('../imagens/chamada_rui.jpg'); background-size:100% auto; } ul#galeria_principal a:hover {box-shadow:0px 0px 2px 5px white; } /*--------------------------------------- VIDEO FUNDO ------------------------------*/ div#video_principal{ position: relative; clear: both; box-sizing:border-box; display: block; width:57.6875%; /*700px*/ padding:4.796875% 0px 0% 0px; margin:0% auto 5.8125% auto; /*100*/ background-color:rgba(0,0,0,.4); /*background-color:rgba(117,106,106,.3); */ border-radius:10px; box-shadow: 0px 0px 20px 2px #cf1010; border:5px solid rgba(55,2,1,1); background-color: rgba(0,0,0,.3); } video#video_principal{ width:80.14285714285714%; /*533*/ display: block; position:relative; left:10%; top:50%; border-radius: 5px; background-color:rgba(0,0,0,.5); border:5px solid rgba(62,2,1,1); } div#video_principal p{ position:relative; text-align:center; margin-top:1.857142857142857%; font-family: 'Poiret One', cursive; color:rgba(255,255,255,.5); font-size:1.375rem; } div#video_principal a{ text-decoration: none; } /*----------------------------------- RODAPE ----------------------------------------*/ footer#rodape{ position: relative; width:100%; background-color:; padding: 0; } div#super_fundo{ position: relative; display: block; width: 100%; background-color: rgba(0,0,0,.7); text-align: center; } .logo_rodape{ position: relative; display: inline-block; margin-top: .8%; bottom: auto; opacity: .6; margin-left: 5%; } div#super_fundo p{ position: relative; display: inline-block; width: 55%; text-align: justify; color: #dbbebe; margin-top: 2.5%; margin-left:4%; font-size: 26px; margin-bottom: 2%; background-color:; vertical-align: top; font-family: 'Poiret One', cursive; font-weight:; } div#info_rodape{ position: relative; width: 100%; padding-top: 2%; padding-bottom: 2%; margin-left: 0%; background:#180000; text-align: center; border-top: 1px solid #1c0000; } div#info_rodape p{ font-family: 'Poiret One', cursive; font-size: 20px; color: #bc9e9e; margin-bottom: 4%; text-align: left; font-weight: bold; } div#info_rodape a{ display: block; font-size: 16px; color: #ddaeae; text-decoration: none; text-align: left; font-family: 'Poiret One', cursive; padding: 8px 0; } div#info_rodape a:hover{ text-decoration: underline; } div#mapa_site{ position: relative; display: inline-block; width: 17%; background-color:; margin: 0 5%; margin-left: 10%; background-color:; } div#mapa_menu{ position: relative; display: inline-block; width: 17%; margin: 0 5%; } div#nosso_site{ position: relative; display: inline-block; width: 17%; vertical-align:top; margin: 0 5%; } div#adulto_rodape{ width: 12%; position: absolute; display: inline-block; top: 50%; right: 18%; clear: both; background-color:; } div#adulto_rodape img{ width: 130px; opacity: .8; } /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- MEDIA QUERIES 480 PX ------------------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 100px) and (max-width: 480px){ /*############################*/ /*########## BODY ##########*/ /*############################*/ body{ background: #620202; } /*############################*/ /*####### BRASA AGORA ########*/ /*############################*/ div#brasa-agora{ box-shadow: 0px 0px 3px 1px #ff0000; border-radius: 4px; } /*############################*/ /*####### CAROUSEL ##########*/ /*############################*/ div#container span{ display: none; } div a img{ border-radius: 2px; } #container{ padding-bottom: 12px; } /*############################*/ /*######## CABECALHO ########*/ /*############################*/ div#cabecalho{ position: relative; display: inline-block; clear: both; margin-top: 5%; margin-bottom: 20%; text-align: center; } .logo { margin-left: 0%; } div#video{ display: none; } /*############################*/ /*########## CAPA ##########*/ /*############################*/ a#capa-individual{ width: 97%; margin-top: 8%; margin-bottom: 4%; border: 7px solid rgba(255,0,0,.3); border-radius: 5px; } .foto1{ border-radius: 5px; } /*############################*/ /*## CHAMADAS -VERIFICADO ###*/ /*############################*/ div#chamada_verificado{ width: 95%; margin: 7% 0% 5% 2%; padding: 11% 0%; } div#chamada_calendario{ width: 95%; margin: 4% 0 5% 2%; padding: 11% 0%; } /*############################*/ /*####### PASSARELA ##########*/ /*############################*/ div.passarela{ width:100%; margin-bottom: 3%; } div.passarela img{ width:180%; display: inline-block; padding-right: 50px; } div.passarela a{ margin-right: 2%; } /*############################*/ /*######## ICONES ##########*/ /*############################*/ div#tabela_principal{ width: 100%; background-image: none; box-shadow: none; margin-top: 4%; margin-bottom:4%; } div#tabela_icones{ position: relative; float: left; width: 100%; padding-top: 2.5%; text-align: center; background:; } div#tabela_icones div{ width: 80px; position: relative; text-align: center; display: inline-block; margin-right: 4.2%; margin-left: 4.2%; margin-top: 5px; margin-bottom: 20px; background:; box-shadow: 0px 0px 10px 1px #cf1010; } div#tabela_texto{ display: none; } /*############################*/ /*####### LOCALIDADE ########*/ /*############################*/ nav#menu_localidade{ padding-bottom: 8%; } nav#menu_localidade li#escolher_localidade{ padding: 10px 0px; } nav#menu_localidade li{ font-size: 20px; } nav#menu_localidade li ul{ width: 92%; left: -1%; margin-top: 18px; text-align: center; } /*############################*/ /*####### GALERIA ##########*/ /*############################*/ ul#galeria_principal{ margin-top:0%; margin-bottom: 10%; } ul#galeria_principal a{ box-shadow:0px 0px 0px 5px rgba(255,255,255,.5); border-radius: 3px; margin-bottom: 5%; display: inline-block; width: 90%; padding-top: 35%; } /*############################*/ /*####### VIDEO ##########*/ /*############################*/ div#video_principal{ display: inline-block; width: 95%; left: 0%; margin-top: 5%; margin-bottom: 5%; padding-left: 2%; padding-top: 10%; border:3px solid rgba(55,2,1,1); text-align: center; } video#video_principal{ text-align: center; width: 95%; left: 0; } /*############################*/ /*####### RODAPÉ ##########*/ /*############################*/ div#super_fundo p{ width: 90%; margin-bottom: 3%; margin-top: 3%; font-size: 22px; text-align: center; } .logo_rodape { margin-top: 1%; } div#mapa_site{ position: relative; width: 100%; text-align: center; background:; margin: 0; } div#mapa_menu{ position: relative; width: 100%; text-align: center; background:; margin: 0; } div#nosso_site{ position: relative; width: 100%; text-align: center; background:; margin: 0; } div#info_rodape p{ padding-top: 2%; text-align: center; border-top: 1px solid #190202; } div#info_rodape a{ text-align: center; padding:3% 0; font-size: } div#adulto_rodape{ position: relative; display: inline-block; width: 100%; text-align: center; top: 0; right: 0; } div#adulto_rodape img{ position: relative; width: 120px; text-align: center; margin-top: 3%; } }/*------FIM MEDIA QUERIES 480px------*/ /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- MEDIA QUERIES 768 px ------------------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 481px) and (max-width: 768px){ /*############################*/ /*######## CABECALHO ########*/ /*############################*/ div#cabecalho{ width: 100%; margin-top: -1%; text-align: center; clear: both; } .logo { margin-left: 0%; margin-bottom: 4%; } div#video{ display: none; } /*############################*/ /*########## CAPA ##########*/ /*############################*/ a#capa-individual{ width: 95%; margin-top: 1%; margin-bottom: 3%; border: 20px solid rgba(255,0,0,.3); border-radius: 8px; } .foto1{ border-radius:4px; } /*############################*/ /*#### CHAMADA -VERIFICADO ###*/ /*############################*/ div#chamada_verificado{ width: 80%; padding: 9% 0%; margin-top: 3%; margin-right: 0%; margin-left: 10%; } div#chamada_calendario{ width: 80%; padding: 9% 0%; margin-top: 5%; margin-bottom: 6%; margin-left: 10%; } /*############################*/ /*######### ICONES ##########*/ /*############################*/ div#tabela_principal{ margin-top:6%; margin-bottom: 6%; } div#tabela_icones{ width: 100%; } div#tabela_icones div{ width: 11%; } div#tabela_texto{ width: 100%; } div#tabela_texto div{ width: 13%; margin-left: 1%; margin-right: 1%; background-color: ; } div#tabela_texto span{ font-size: 18px } /*############################*/ /*####### LOCALIDADE ########*/ /*############################*/ nav#menu_localidade{ margin-bottom: 4%; } nav#menu_localidade { margin-bottom: 4%; } /*############################*/ /*####### GALERIA ##########*/ /*############################*/ ul#galeria_principal{ margin-bottom: 10%; } ul#galeria_principal a{ width:44.96875%; margin:18px 2%; } /*############################*/ /*######## VIDEO ##########*/ /*############################*/ div#video_principal{ width: 85%; padding-bottom: 5%; margin-bottom: 10%; margin-left: 7.5%; padding: 8% 4% 3% 4%; border:3px solid rgba(55,2,1,1); text-align: center; } video#video_principal{ text-align: center; width: 90%; margin-left: 4.5%; left: 0; } /*############################*/ /*####### RODAPÉ ##########*/ /*############################*/ div#super_fundo p{ font-size:22px; width: 85%; text-align: center; margin-bottom: 1%; margin-top:3; margin-left: 0; } .logo_rodape{ margin-bottom: 1%; margin-left: 0; } div#mapa_site{ width: 25%; margin: 0 0% 0 2%; background-color:; } div#mapa_menu{ width: 25%; margin: 0 0% 0 5%; background-color:; } div#nosso_site{ width: 25%; margin: 0 0% 0 2% ; background-color:; } div#adulto_rodape img{ width: 130px; margin-left: 0; } div#info_rodape a{ font-size: 16px; padding: 7px 0; } div#info_rodape p{ font-size: 20px; } }/*------ FIM MEDIA QUERIES 768PX -----*/ /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- MEDIA QUERIES 1024 px ------------------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 769px) and (max-width: 1024px){ /*############################*/ /*######## CABECALHO ########*/ /*############################*/ div#cabecalho{ margin-top: -2%; } .logo { margin-left:; } /*############################*/ /*####### CHAMADA VIDEO #####*/ /*############################*/ div#video{ position: absolute; width: 150px; padding: 30px 0; left:80%; } /*############################*/ /*########## CAPA ##########*/ /*############################*/ a#capa-individual{ width: 90%; margin-bottom: 3%; border: 25px solid rgba(255,0,0,.3); } /*############################*/ /*#### CHAMADA -VERIFICADO ###*/ /*############################*/ div#chamada_verificado{ width:46%; padding:5% 0px; margin-left:2%; margin-top:3.125%; } div#chamada_calendario{ float:left; width:46%; padding:5% 0px; margin-left:2%; margin-top:3.125%; } /*############################*/ /*######### ICONES ##########*/ /*############################*/ div#tabela_principal{ margin-top:6%; margin-bottom: 6%; } div#tabela_icones{ width: 100%; } div#tabela_icones div{ width: 8%; margin-left: 3%; margin-right: 3%; } div#tabela_texto{ width: 100%; } div#tabela_texto div{ width: 13%; margin-left: .5%; margin-right: .5%; background-color: ; } div#tabela_texto span{ font-size: 20px; } /*############################*/ /*####### LOCALIDADE ########*/ /*############################*/ div#container-localidade{ margin-top: -2% } /*############################*/ /*####### GALERIA ##########*/ /*############################*/ ul#galeria_principal{ margin-bottom: 7%; } /*############################*/ /*####### VIDEO ##########*/ /*############################*/ div#video_principal{ width: 70%; margin-bottom: 8%; margin-left: 15%; padding: 8% 4% 3% 4%; border:3px solid rgba(55,2,1,1); text-align: center; } video#video_principal{ text-align: center; width: 90%; margin-left: 4.5%; left: 0; } /*############################*/ /*####### RODAPÉ ##########*/ /*############################*/ div#super_fundo p{ margin-bottom: 2%; margin-left: 0; } }/*----FIM 1024px----*/ /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- MEDIA QUERIES 0 px BRASA AGORA ------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 0px) and (max-width: 479px){ /*############################*/ /*####### BRASA AGORA ########*/ /*############################*/ div#brasa-agora{ width:16%; margin-left:2%; margin-top: 10px; box-shadow: 0px 0px 3px 1px #ff0000; border-radius: 4px; } #carousel{ width: 81%; float: right; z-index: 1; } #carousel div a img{ border-radius: 3px; } }/*------FIM MEDIA QUERIES brasa agora 0-479 px------*/ /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- MEDIA QUERIES 480 px BRASA AGORA ------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 480px) and (max-width: 639px){ /*############################*/ /*####### BRASA AGORA ########*/ /*############################*/ div#brasa-agora{ width:14%; /*111px*/ margin-left:1%; margin-top: 10px; border-radius: 5px; } #carousel{ width: 84%; float: right; z-index: 1; } #carousel div a img{ border-radius: 3px; } }/*------FIM MEDIA QUERIES brasa agora 480-639 px------*/ /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- MEDIA QUERIES 640 px BRASA AGORA ------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 640px) and (max-width: 1024px){ div#brasa-agora{ width:10.8%; /*111px*/ margin-left:1%; margin-top: 10px; } #carousel{ width: 87.5%; float: right; z-index: 1; } }/*------FIM MEDIA QUERIES brasa agora 640 1024 px------*/ /*-------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------- ---------------------------- :HOVER A PARTIR 1024 PX; ------------------------- ---------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------*/ @media screen and (min-width: 1024px) { #carousel img:hover{ -webkit-transform:scale(1.1); } /*&&&&&&&&&&&&&&&&&&&&&&&&&& FIM MEDIA QUERIES %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/ <!-- language: lang-html --> <a id="capa-individual" href="individual.html"> <picture> <source class="foto1" srcset="imagens/capa_mulheres_peq.jpg" media="(max-width: 480px)"> <source class="foto1" srcset="imagens/capa_mulheres.jpg" media="(min-width:481px)"> <img class="foto1" src="imagens/capa_mulheres.jpg" alt=""> </picture> </a> <!-- end snippet -->