Incorporar imagem em um elemento <button>

135

Estou tentando exibir uma imagem png em um <button>elemento em HTML. O botão tem o mesmo tamanho da imagem e a imagem é mostrada, mas por algum motivo não está no centro - por isso é impossível ver tudo. Em outras palavras, parece que o canto superior direito da imagem está localizado no centro do botão e não no canto superior direito do botão.

Este é o código HTML:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

Atualização:
O que realmente acontece, eu acho, é um problema de margem. Eu tenho uma margem de dois pixels, então a imagem de fundo está saindo do botão. O botão ea imagem são do mesmo tamanho, que é apenas 20px, por isso é muito explícito ... Eu tentei margin:0, padding:0mas isso não ajuda ...

Amit Hagin
fonte
Para mim, funciona perfeitamente ... qual é o contexto em que você está passando por isso? Possível postar mais algumas linhas de código?
3
Você pode reproduzir isso em um site ao vivo, como JS Fiddle, para ver o que está acontecendo?
David diz que restabelece Monica

Respostas:

189

Você pode usar a imagem do tipo de entrada.

<input type="image" src="http://example.com/path/to/image.png" />

Funciona como um botão e pode ter os manipuladores de eventos anexados a ele.

Como alternativa, você pode usar css para estilizar seu botão com uma imagem de fundo e definir as bordas, margens e afins de maneira apropriada.

<button style="background: url(myimage.png)" ... />
Andrew Barber
fonte
1
... e não precisa de JavaScript para enviar o formulário.
ComFreek
6
-1: " Dever " é um termo muito forte, pois não é para isso que ele <input type="image">foi projetado. Por que você não sugere CSS?
Wesley Murch
Prefiro usar um botão. se não encontrar resposta, farei. obrigado
Amit Hagin
Em seguida, modele-o, conforme observado nesta e em outras respostas.
Andrew Barber
3
Não se esqueça de que as duas tags iniciais e finais são necessárias para o elemento button, portanto tecnicamente <button /> não é válido, deve ser <button> </button>.
Tamas Czinege
66

Se a imagem for uma parte de dados semânticos (como uma imagem de perfil, por exemplo), use um <img>elemento dentro de seu <button>e use CSS para redimensionar o arquivo <img>. Se a imagem é apenas uma maneira de tornar um botão visualmente agradável, use CSS background-imagepara estilizar o <button>(e não use um<img> ).

Demonstração: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

CSS:

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

Resultado:

insira a descrição da imagem aqui

ThinkingStiff
fonte
@ThinkingStiff <image>elemento? Eu acho que você quer dizer <img>no seu texto;)
ComFreek 30/12
obrigado pela boa resposta !! mas o problema permanece ... Atualizei a pergunta um pouco - talvez ela possa ajudá-lo a entender melhor.
Amit Hagin
@AmitHagin Vi sua atualização. Lembre-se de que um botão possui bordas, incluídas no cálculo de sua altura. Portanto, para ajustar uma 20pximagem alta, a altura do botão teria que ser 24px.
ThinkingStiff
@AmitHagin Além disso, para evitar problemas de espaço em branco, mude <img>para display: block;. Eu atualizei o link da demonstração para mostrar isso.
ThinkingStiff
Há alguma preocupação com a acessibilidade / texto alternativo com esse método? Estou realmente enferrujado, mas está ocultando o texto deslocando-o em alguns milhares de pixels ainda a solução alternativa aceita?
precisa saber é o seguinte
10

tente isso

   <input type="button" style="background-image:url('your_url')"/>
Chris P
fonte
10

A maneira mais simples de colocar uma imagem em um botão:

<button onclick="myFunction()"><img src="your image name here.png"></button>

Isso redimensionará automaticamente o botão para o tamanho da imagem.

Eli Davies
fonte
4

Por que você não usa uma imagem com um onclick atributo?

Por exemplo:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>
SirFireball
fonte
0

Adicione uma nova pasta com o nome de Imagens no seu projeto. Coloque algumas imagens na pasta Imagens. Então vai funcionar bem.

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">
Parameswaran
fonte
0

Experimente este formato e use o atributo "width" para gerenciar o tamanho da imagem, é simples. JavaScript também pode ser implementado em elemento.

<button><img src=""></button>

user13617141
fonte
-7

Os botões não suportam imagens diretamente. Além disso, você faz links ()

As imagens são adicionadas sobre os botões usando a propriedade BACKGROUND-IMAGE com estilo

você também pode especificar as repetições e outras propriedades usando a tag

Por exemplo: uma imagem básica adicionada a um botão teria este código:

    <button style="background-image:url(myImage.png)">

Paz

proctr
fonte
2
Sua resposta está incorreta, a documentação oficial diz que é permitida.
biphobe