Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

tconde

Redimensionar Imagens que são link juntamente com os outros elementos.

Por , em Desenvolvimento frontend

Recommended Posts

tconde    0

tconde
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

tconde    0

tconde
Postado

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'><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> // já estas três aqui que são links não estão redimensionando na mesma proporção das outras. Basicamente quero que os links redimencionem na mesma proporção das imagens comuns, entende?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado 

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ão
seletor { propridade: valor; * { propriedade: valor; }

(A não ser que, claro, esteja utilizando um pré-processador CSS)

Compartilhar este post

Link para o post
Compartilhar em outros sites

tconde    0

tconde
Postado

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;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado 
@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"/>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito