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 Jeft
      Depois de "um ano sabático", estou voltando ao desenvolvimento em PHP.
      Neste retorno, me deparei com a seguinte necessidade: 
      Através de um cadastro, gostaria de criar um link passando alguns parâmetros, tipo:
      globo.com.br
      Crio o cadastro FLAMENGO.
      Aí queria criar "automaticamente" um link flamengo.globo.com.br para acessar através do browser. Seria o equivalente a globo.com.br/noticia/busca.php?time=flamengo
      Se cadastro Vasco: vasco.globo.com.br
      Não sei nem por onde começar... Já tentei algumas coisas mas ainda não tive sucesso.
      Obrigado
    • Por Evaldo snieto
      Olá galera , estou com um probleminha no meu upload . As imagens PNG estão ficando com o fundo preto

    • Por fertiin
      Tenho a seguinte imagem:
      <div class="row text-center"> <div class="col-lg-3"> <img src="imagens/vetor_foto_de_perfil.png" width="100" heigth="100" alt="Foto de perfil" class="fotoperfil rounded-circle" > </div> </div> Desejo adicionar uma borda ao redor dela, tentei da seguinte forma:
      img.fotoperfil{ border:1px dotted black; } Porém não obtive sucesso, como eu poderia fazer?
    • Por Lenon John
      Observação: As imagens que estão na pasta drawable, eu adicionei manualmente,(CTRL + C) (CTRL + V)
      public View getView(int position, View convertView, ViewGroup parent) { Bitmap raw; byte[] fotoArray; View v = View.inflate(context,R.layout.activity_produto_item,null); TextView nome = (TextView)v.findViewById(R.id.tvNome); ImageView imagem = (ImageView)v.findViewById(R.id.tvImagem); nome.setText(lista_exibicao.get(position).getNome()); fotoArray = lista_exibicao.get(position).getImagem(); if(fotoArray!=null){ raw = BitmapFactory.decodeByteArray(fotoArray,0,fotoArray.length); imagem.setImageBitmap(raw); } v.setTag(lista_exibicao.get(position).getId()); return v; }
    • Por gheeenrique
      Olá pessoal,
      Estou desenvolvendo um sistema de upload de imagem, entretanto será utilizado via mobile, o que ocorre é que consigo fazer upload no computador, mas no mobile (Somente android) o upload e dado como sucesso mas a imagem, salva o log no banco de dados mas não é enviada a pasta /upload, já no iOS ou Computador é enviado normalmente para a pasta.
      Alguém sabe como resolver para que o upload da imagem seja feito também via android?
       
      Segue meu código completo do arquivo de anexo:
      <?php if (!isset($_SESSION)) { # code... session_start(); } require_once("conexao.php"); $id = $_POST["id"]; $responsavel = $_POST["responsavel"]; $diretorio = "upload/"; $_UP['extensoes'] = array('jpg', 'jpeg', 'png', 'gif', 'xlsx', 'pdf', 'doc'); $arquivo=$_FILES["arquivo"]; if (isset($_FILES['arquivo']['name'])) { $extensao = strtolower(end(explode('.', $_FILES['arquivo']['name']))); if (array_search($extensao, $_UP['extensoes']) === false) { $_SESSION["tela"] = "chamados.php"; $_SESSION["erro"] = "Por favor, envie arquivos com as seguintes extensões: jpg, png, doc, xls ou xlsx."; header('Location: demandas_ver.php?id='. $id); exit; } $temp = explode(".", $_FILES["arquivo"]["name"]); $newfilename = round(microtime(true)) . '.' . end($temp); move_uploaded_file($_FILES["arquivo"]["tmp_name"], "upload/" . $newfilename); $cadastrar = mysql_query("INSERT INTO Demanda_Log (id_demanda, mensagem, data, responsavel, tipo, url) VALUES('$id', '$mensagem', NOW(), '$responsavel', '3', '$newfilename')", $db); if ($cadastrar) { //SALVA LOGS $mensagem = "Adicionou um anexo a demanda ID: $id"; salvaLog($mensagem); //FIM SALVA LOGS $_SESSION["sucesso"] = "demandas_ver.php?id=". $id; $_SESSION["sucesso"] = "Mensagem adicionada com sucesso!"; header('Location: demandas_ver.php?id='. $id); } else { $_SESSION["erro"] = "demandas_ver.php?id=". $id; $_SESSION["erro"] = "Houve um erro ao adicionar a mensagem."; header('Location: demandas_ver.php?id='. $id); } } else { $_SESSION["erro"] = "demandas_ver.php?id=". $id; $_SESSION["erro"] = "Houve um erro ao adicionar a mensagem. ERRO: ARQ01"; header('Location: demandas_ver.php?id='. $id); } ?>  
×

Informação importante

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