Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, estou com o seguinte problemam no código abaixo tenho 3 imagens, que ao clicar nelas, serão links direcionados para outros sites(ou páginas). O problema é que quando minimizo o navegador, estas imagens não minimizam na mesma proporção que imagens comum, que estão na página. Alguém pode me dar uma ajuda?
Aí vai o código: na linhas sublinhadas estão as "imagens links" que quero arrumar!
<html><head><style>#content img {max-width:100%;max-height:100%;margin:auto;display:block; {margin:0;padding:0;}}#content a:link {max-width:100%;max-height:100%;margin:auto;display:block; {margin:0;padding:0;}} </style></head><body><div style="background-color:#126287;height:15%;width:100%;float:left;border: 0px;"></div><div id="content" style="background-color:#FEFEFE;height:25%;width:100%;float:left;" align="center"><img src="ufpel.jpg" align="left"><img src="logo.jpg" align="center"></div><div id="content" style="background-color:#126287;height:60%;width:100%;float:left;padding-top:10px;"><a href='https://webmail.ufpel.edu.br'><img src="botao_webmail.jpg" align="center"></a><a href='https://hospedagem.ufpel.edu.br:8080'><img src="botao_painel.jpg" align="center"></a><a href='http://hospedagem.ufpel.edu.br/phpmyadmin/'><img src="botao_dados.jpg" align="center"></a></div></body></html>
alguém sabe pessoal?
o que eu quero é que as imagens que são links, redimensionem em igual proporção com as imagens simples. Quando minimizo a página os links não redimensionam na mesma proporção das duas primeiras imagens.
<img src="ufpel.jpg" align="left"><img src="logo.jpg" align="center"> // estás duas estão redimensionando como eu quero.
<a href='[https://webmail.ufpel.edu.br'>a img {
max-width: 100%;
}
--Uma sugestão: Tire esse [inline] {margin:0;padding:0;}[/inline] de dentro de outros seletores. é um seletor por si só.
seletor { propriedade: valor; }
{ propriedade: valor; } e nãoseletor { propridade: valor; { propriedade: valor; }
(A não ser que, claro, esteja utilizando um pré-processador CSS)
não funcionou coloquei desta maneira, coloquei como você me falou e não funcionou:
#content img { ///para imagem comum
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}#content a img{ ////para imagem com comportamento de link
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}Também estou com esse problema. Você conseguiu resolver ?
@media screen and (max-width:1024px){
img.responsive {width: 200px;}
}
@media screen and (min-width:1025px){
img.responsive{width: 300px;}
}
img.responsive{height: auto;}
<img alt="sunset" src="https://forum.imasters.com.br/uploads/monthly_2018_04/logo-forum.png.4506d35d6a61d3e763844764b13a891b.png" class="responsive"/>
Eu testei e as imagens redimensionaram.
Não entendi o que você quer fazer. Seja mais claro sobre o que está acontecendo e sobre o que quer que aconteça.