Incrustar imagen en un elemento <button>


135

Estoy tratando de mostrar una imagen png en un <button>elemento en HTML. El botón tiene el mismo tamaño que la imagen, y la imagen se muestra pero, por alguna razón, no está en el centro, por lo que es imposible verlo todo. En otras palabras, parece que la esquina superior derecha de la imagen se encuentra en el centro del botón y no en la esquina superior derecha del botón.

Este es el código HTML:

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

Actualización:
lo que realmente sucede, creo, es un problema de margen. Obtengo un margen de dos píxeles, por lo que la imagen de fondo sale del botón. El botón y la imagen son del mismo tamaño, que es única 20px, por lo que es muy notable ... He intentado margin:0, padding:0pero no sirvió de nada ...


Para mí, funciona perfectamente ... ¿cuál es el contexto en el que estás experimentando esto? Posible publicar algunas líneas más de código?

3
¿Puede reproducir esto en un sitio en vivo, como JS Fiddle para que veamos qué está pasando?
David dice que reinstale a Mónica el

Respuestas:


189

Podría usar la imagen de tipo de entrada.

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

Funciona como un botón y puede tener los controladores de eventos adjuntos.

Alternativamente, puede usar css para diseñar su botón con una imagen de fondo y establecer los bordes, márgenes y similares de manera adecuada.

<button style="background: url(myimage.png)" ... />

1
... y no necesita JavaScript para enviar el formulario.
ComFreek

66
-1: " Debería " es un término demasiado fuerte, ya que esto no es realmente para lo que <input type="image">está diseñado. ¿Por qué no sugerirías CSS?
Wesley Murch

Prefiero usar un botón. Si no encuentro respuesta, lo haré. gracias
Amit Hagin

Luego dale estilo, como se señala en esta y otras respuestas.
Andrew Barber

3
No olvide que las etiquetas de finalización inicial y final son necesarias para el elemento del botón, por lo que técnicamente <button /> no es válido, debería ser <button> </button>.
Tamas Czinege

66

Si la imagen es una pieza de datos semánticos (como una imagen de perfil, por ejemplo), use un <img>elemento dentro de su <button>y use CSS para cambiar el tamaño <img>. Si la imagen es solo una forma de hacer que un botón sea visualmente agradable, use CSS background-imagepara diseñar el <button>(y no use un <img>).

Demostración: 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;
}

Salida:

ingrese la descripción de la imagen aquí


<image>Elemento @ThinkingStiff ? Creo que te refieres <img>a tu texto;)
ComFreek

gracias por la buena respuesta !! pero el problema persiste ... Actualicé un poco la pregunta, tal vez pueda ayudarte a entenderlo mejor.
Amit Hagin

@AmitHagin Vi tu actualización. Recuerde que un botón tiene bordes, que se incluyen en el cálculo de su altura. Entonces, para ajustar una 20pximagen alta, la altura del botón tendría que ser 24px.
ThinkingStiff

@AmitHagin Además, para evitar problemas de espacios en blanco, cambie su <img>a display: block;. Actualicé el enlace de demostración para mostrar esto.
ThinkingStiff

¿Hay alguna preocupación sobre el acceso / texto alternativo con este método? Estoy realmente oxidado, pero ¿ocultar el texto al compensarlo con unos pocos miles de píxeles sigue siendo la solución aceptada?
Rob Drimmie

10

prueba esto

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

10

La forma más sencilla de poner una imagen en un botón:

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

Esto cambiará automáticamente el tamaño del botón al tamaño de la imagen.


4

¿Por qué no usas una imagen con un onclickatributo?

Por ejemplo:

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

0

Agregue una nueva carpeta con el nombre de Imágenes en su proyecto. Ponga algunas imágenes en la carpeta Imágenes. Entonces funcionará bien.

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

0

Pruebe este formato y use el atributo "ancho" para administrar el tamaño de la imagen, es simple. JavaScript también se puede implementar en el elemento.

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


-7

Los botones no admiten imágenes directamente. Además, la forma en que lo haces es para enlaces ()

Las imágenes se agregan sobre botones que usan la propiedad BACKGROUND-IMAGE con estilo

También puede especificar las repeticiones y otras propiedades usando la etiqueta

Por ejemplo: una imagen básica agregada a un botón tendría este código:

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

Paz


2
Su respuesta es incorrecta, la documentación oficial dice que está permitido.
bifóbico
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.