Jump to content
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.

Share this post


Link to post
Share on other 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?

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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; ">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By unnameduser
      Tem alguma forma de retirar esse espaço que fica entre os links quando selecionados no CTRL + A? Isso particularmente me incomoda muito.

    • By Kaio Kdesigner
      Oi Pessoal!
       
      Estou editando um tema, e ai as imagens dos thumbsnails estão ficando distorcidas.
       
      Cada categoria tem um tamanho diferente de imagem, mas ai elas ficam destorcidas dentro do tamanho (meio confuso né?)
       
      ta ficando assim: https://screenshot.net/gxvqc9y
       
      Como que faço para colocar a imagem dentro do tamanho, ex: 150x150, sem q ela fique distorcida??
    • By alexdcarvalho
      Como colocar uma imagem no html/css sem que a qualidade dela não decaia? Eu fiz os procedimentos abaixo, achando que a coisa pudesse melhorar, porém a imagem horizontalmente fica esticada, toda a resolução se perde. O que eu quero é justamente fazer com que o width fique completo e o height no 300px, porém com uma qualidade boa.
       
       A resolução original da imagem é de 1920x1279.
       
      .img {     width: 100%;     height: 300px;     background-size: cover;     background-position: center right; }
    • By DanielF
      Pessoal Eu Recentemente estava fazendo um gerador de qr-code, e preciso criar um botão que quando a pessoa clique apareça para poder baixar/fazerdownload da imagem gerada, pode me ajuda? to preso nisso faz tempo, e se puderem podem Organizar o codigo para mim? 
       
       
       
       
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>QR-Code</title>
          <style type="text/css">
              #qrcode {
                  border: 1pt solid gray;
                  display: inline-block;
              }
          </style>
      </head>
      <body>
          <center>
              <input type="text" name="qrtexto" id="qrtexto" onkeypress="gerarqr();" onkeyup="gerarqr();"><br>
              <br>
              <button onclick="gerarqr();" on>Gerar</button>
              <button onclick="limpar();" on>Limpar</button>
          </center>
          <br>
          <br>
      <center>
          <div id="qrcode"></div>
      </center>
      <br>
      <center>
      <button onclick="baixar();">Baixar (Em Breve)</button>
      </center>
      <script src="qrcode.min.js"></script>
      <script>
          qrcode.innerHTML="<img src='limpo.png'>";
          function gerarqr(){
      var qrcode=document.getElementById('qrcode');
      qrcode.innerHTML=" ";
      var texto=document.getElementById("qrtexto").value;
          var qrcodee = new QRCode(qrcode, {
          text: texto,
          width: 300,
          height: 300,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
      });
      }
      function limpar(){
      qrcode.innerHTML="<img src='limpo.png'>";
      }
      function baixar() {
      }
      </script><br><br><br><br><br><br><br>
      <h6 align="center">Feito por Itz_Topz</h6>
      </body>
      </html>
    • By Gildvan Arley
      Olá a todos
      estou criando uma área do usuário onde vai ser listados os kits do servidor de jogos que eu tenho em sua área.
      quando o kit acaba vai aparecer o botão de pagamento pra ele e nessa hora cada kit vai ter seu valor, estou com problema na parte de link do pagamento
      gostaria de saber qual o formato devo usar varchar ? no tipo la no BD e como posso pegar esse link la do banco de dados? 
      testei uns formas aqui e nada deu certo.
       
      cada kit tem seu valor, ai eu quero colocar o link de pagamento, pra quando o kit for removido aparecer o botão de pagamento pra ele, os botões já estão dando certo, só estou com problema pra pegar
      o link de cada kit. os valores de cada kit já estão criados no mercado pago
      <?php $data = date("Y/m/d"); $fimVip = $exibir_pag["fimvip"]; $dataPag = $exibir_pag["data"]; $mercadoP = $exibir_vip["mercadopago"];//A URL do mercado pago que esta no banco de dados if ($dataPag == NULL || strtotime($fimVip) < strtotime($data)){?> <table class="table"> <thead> <tr><span class="list-group-item text-left"><strong>Formas de pagamentos</strong></span></h5></tr> <tr> <th><a target="_blank" href="<?php echo $mercadoP;?>"><span class="label label-info">M. Pago</span></a></th> <th><a target="_blank" href="#"><span class="label label-success">PicPay</span></a></th> <th><a target="_blank" href="#"><span class="label label-info">Paypal</span></a></th> </tr> </thead> </table> <?php } else { echo ''; } ?> Imagem do painel
      do BD
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.