Ir para conteúdo
Frederico Zanitti

Link com imagem não "cobre" todo a área da imagem

Recommended Posts

Galera, boa noite!

Sou novo no forum, estou dando uma repaginada no meu site e me deparei com a seguinte situação:

                <div class="col-xs-2 posdiversosIcones">
                    <a href="imagens/diversos/evcoc_festaconfraternizacao_2009.jpg" 
                       rel="lightbox" 
                       title="EV COC - Convite Festa Confraternização, 2009">
                        <img src="imagens/diversos/evcoc_festaconfraternizacao_2009a.png" 
                             class="img-responsive center-block"
                             height="160px"
                             width="160px"
                             border="0">
                    </a>
                </div>

A imagem que está fazendo a função de um botão tem 160px x 160px, porém a área de clic dela não pega o tamanho total da imagem, a área de clic está somente na metade da imagem, tipo 160px x 80px. A metade de baixo da imagem não sofre ação nenhuma, é como se não fosse uma imagem linkada. Será que fui claro em minha explicação? rsrs

Bom, desde já agradeço a ajuda dos colegas.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia,

Pelo que percebi o seu código consiste nisto: https://jsfiddle.net/a5r5b8nz/

O link no elemento a devia ocupar todas a imagem, pois quem define o seu tamanho é o css da imagem. Veja senão tem outra regra de css a anular essa.

Nota: Alguém pode-me ajudar a perceber porque a borda do botão a não engloba toda a imagem?

Compartilhar este post


Link para o post
Compartilhar em outros sites

A tag <a> é um inline-element, sendo assim, sua largura é definida pelo conteúdo que ele está envolvendo (no caso a imagem). Dessa forma, como a imagem é um um inline-element também o link só irá funcionar na área onde imagem se encontra porém não em sua altura completa já que não se pode definir altura para elementos inline logo a imagem só tem uma altura visual, então o link só funcionará na altura da sua linha.

Veja :

http://codepen.io/anon/pen/YGPKWG

Note que a borda da tag <a> é inferior ao tamanho da imagem porque ambas as tags são inline-elements mas a imagem ocupa visualmente um espaço maior pois tem uma altura (altura da imagem, não do elemento em si) maior que a linha em que se encontra.

Pra fazer o link funcionar corretamente basta defini-lo como um elemento inline-block assim permitindo elementos de nível block e inline dentro dele e assumindo a altura (se não definida) de seu conteúdo (no caso a imagem) e a imagem como block.
Se manter a imagem com seu display padrão que é inline será gerado um padding no bottom. Uma explicação detalhada sobre o problema pode ser encontrada: aqui.

Solução para o problema:

http://codepen.io/anon/pen/LREPkp

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Valeu znatanalvez, a propriedade display: inline-block; já foi suficiente para resolver o problema!

Obrigado!

Agradeço também ao codercss.

Valeu pessoal!

Você provavelmente não possui outros elementos abaixo da imagem caso contrário teria o problema que eu citei.

Compartilhar este post


Link para o post
Compartilhar em outros sites

znatanalves


Pelo que percebi a aplicação de elemento inline no interior de outro não permite que seja definida o seu tamanho?

Neste exemplo: https://jsfiddle.net/ededev/fm38weuh/1/ Consigo definir o tamanho da imagem, mas não consigo definir a altura do elemento a, pois como é um elemento inline, estes tipos de elementos não permitem a mudança de largura e altura.

O correcto será aplicara a propriedade display com os valores, correctos, conforme mencionou.

Diga-me s.f. se estou certo?

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

znatanalves

Pelo que percebi a aplicação de elemento inline no interior de outro não permite que seja definida o seu tamanho?

Neste exemplo: https://jsfiddle.net/ededev/fm38weuh/1/ Consigo definir o tamanho da imagem, mas não consigo definir a altura do elemento a, pois como é um elemento inline, estes tipos de elementos não permitem a mudança de largura e altura.

O correcto será aplicara a propriedade display com os valores, correctos, conforme mencionou.

Diga-me s.f. se estou certo?

Obrigado

Sim, exatamente isso.

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

No meu caso uma parte da minha imagem tava em baixo de outro elemento com transparência #00fff; e z-index maior que o da minha imagem!

 Resolvi assim:

<a href="http://www.abim.inf.br/mudanca-de-sexo-impossibilidade-biologica-revolta-contra-deus/#.W-MT7tVKjIU" rel="nofollow">

  <img src="PRA-LINKS-UM-KB.png" alt="" style="width:152px;height:43px; border:0; top:-685px; left:-5px; position:absolute;opacity:0; z-index:99; ">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por Raphaeldidata
      Vamos supor que eu coloque uma logomarca no topo do meu site, e queira dar semântica à ela. Tudo bem se eu fizer dessa forma? Existe uma maneira mais simples?
       
      Basicamente criei um cabeçalho para minha logomarca, de forma a dar importância e contexto para que o "robo" do Google, por exemplo, tenha mais facilidade em interpretar o "conteúdo" da minha imagem e conseguir catalogá-la adequadamente em seu motor de buscas. 
      span.td-visual-hidden { display: none; } <div class="td-header-logo"> <h1 class="td-logo"> <a href="#"> <img src="_images/defesa-evangelho.png" alt="Defesa do Evangelho" title="Defesa do Evangelho"/> <span class="td-visual-hidden">Defesa do evangelho</span> </a> </h1> </div> Desde já agradeço!
    • Por jaquelss
      Os erros estão na imagem anexada. Não sei exatamente o que colocar quanto o conteúdo no menu, mas quanto ao botão segue abaixo:
       
      <div class="col-md-2 col-sm-6 col-6">
      <button class="button button-rounded btn-block nomargin"
      style="margin-top: 29px !important;"><a href="http://localhost/xavier/#/imovel"></style>Encontrar</a></button>
      </div>
       
      Tenho certeza que é uma bobagem minha, mas perdi a tarde tentando resolver.
      Ainda sou estudante, não tenho conhecimento total quanto a isso (apesar de que acho que ninguém tem né kk).
      Enfim,
      Agradeço desde já.

    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por isaque_cb2
      Olá galera, eu estou trabalhando em um site pessoal, mais para aprendizado mesmo, mas me deparei com um erro, quando eu abro o site no navegador (PC) funciona normal, mas quando abro no celular, a imagem dica pequena e no topo, alguém pode me ajudar com isso?
      print 1: (modo mobile do inspecionar)

      no PC fica normal, repare a área cinza abaixo da imagem, toda essa área devia ser coberta pela imagem, grato!
      http://prntscr.com/mvj3ed
       
      Grato desde já!
×

Informação importante

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