Menú Principal

Este sitio usa cookies y tecnologías similares.

Si no cambia la configuración de su navegador, usted acepta su uso. Saber más

Acepto

Zona descarga

Cortar y centrar una imagen con HTML y CSS

Tamaño de letra:

Cortar con margenes negativos

Poder cortar una imagen y mostrar la parte que realmente necesitas puede ser muy útil, por ejemplo, si quieres mostrar una imagen que tienes subdividida en 4 partes e imprimes en pantalla parte por parte. El conjunto total de la imagen es posible que sobrepase el tamaño, pero las subdivisiones hacen que no tengas que subir al servidor 4 imágenes y solo subas una. En este tutorial vamos a ver una de las formas posibles.

Para cortar imágenes con HTML yo suelo recurrir a dos formas utilizando CSS:

  • El uso de márgenes negativos. Que es el que vamos a ver aquí.
  • El uso de la propiedad clip. La explicaré en otro tutorial porque tiene algunas características interesantes y sobre todo en navegadores IE hay que hacer algunos ajustes.

Te recomiendo para un código más sencillo evitando poner el párrafo en modo flotante y con menos código para definir el estilo, visitar el siguiente tutorial: Cortar y centrar imágenes con HTML y CSS (II).

IMPORTANTE (última actualización): Cuando escribí este artículo, las webs en las que fue testeado el código, tenían código HTML4 y XHTML1.1 y no eran adaptables. Este código no está diseñado para ser utilizado en dispositivos adaptables y solo funcionará en dispositivos con pantalla grande, no en smartphones o tablets. Por este motivo, este código ha sido mejorado y adaptado a los nuevos dispositivos y puedes acceder a él desde aquí: Responsive imagen: centrar y cortar imágenes con HTML5 y CSS.

El uso de márgenes negativos

Es muy utilizado y además voy a conseguir que funcione perfectamente en casi todos los navegadores: IE (5.5 - 9), Firefox, Chrome, Opera, Safari, dispositivos móviles, tabletas etc. Pongo etc porque eson son los navegadores en los que lo he testeado. Si tú quieres ver si funciona en otros, simplemente lee este artículo porque vamos a hacer el ejemplo aquí.

Lo primero que necesitamos es una imagen. Voy a buscar una cualquiera en mi servidor, esta:

Arquitectura John Von Neumann

Dimensiones:

  • Ancho (width): 423 píxeles (px)
  • Alto (Height): 246 píxeles (px)

Normalmente el código que se usa para mostrar una imagen es parecido al siguiente (quito alt y title y centro la imagen desde el párrafo):

<p style="text-align: center;">
<img style="width: 423px; height: 246px;"
src="/imagen/imagen_ejemplo.png" /></p>

Observa que se muestra una imagen centrada dentro de un párrafo. Es el caso de la imagen anterior. Como ejemplo vamos a intentar mostrar el cuadro azul que pone "Memoria principal". Puedes observar que la imagen (<img>) y el párrafo (<p>) ya tienen un estilo específico que vamos a completar "en linea". Puedes crearte tu propio archivo de estilos pero como los márgenes no los puedes generalizar tendrás que hacerlo, de todas formas, inline.

Para el párrafo <p>, voy a poner el estilo siguiente:

overflow: hidden;
float: left;

Para la imagen <img> simplemente modificaremos los márgenes. Voy a calcular los respectivos píxeles desde el exterior de la imagen hasta el recuadro "Memoria principal" (aproximados):

  • Arriba: 55px
  • Derecha: 216px
  • Abajo: 112px
  • Izquierda: 140px

Conociendo esos datos ya podemos poner también el estilo a la imagen:

margin: -55px -216px -112px -140px;

Así que el código final es el siguiente:

<p style="overflow: hidden; float: left;">
<img style="margin: -55px -216px -112px -140px;"
src="/imagen/imagen_ejemplo.png" /></p>

Veamos cómo queda ese código:

Imagen recortada

Así de sencillo es. Y quiero que veas que lo estoy probando ahora mismo desde ¡Internet Explorer 5.5! Ahora, si quisieras, podrías añadir los estilos que consideres oportunos, por ejemplo, poner borde.

A pesar de esta sencillez, debes observar que el párrafo lo hemos puesto flotante a la izquierda (float: left;). Puedes usar del mismo modo float: right. Esto (propiedad flotante) es importante ya que si intentas escribir en otro párrafo después de la imagen, verás que quedará en un lateral. Me imagino que querrás que quede como este ejemplo. Para eso en el párrafo siguiente a la imagen puedes añadir: clear: both;. Para que lo tengas más claro mira el código fuente de esta página y el código que te pongo aquí:

<p style="overflow: hidden; float: left;">
<img style="margin: -55px -216px -112px -140px;"
src="/imagen/imagen_ejemplo.png" /></p>
<p style="clear: both;">Así de sencillo es...</p>

Y finalmente queda una última pregunta que te hago: ¿Cómo podemos centrar la imagen en pantalla? El estilo del párrafo no funciona (margin left-right auto), así que podemos centrar la imagen (realmente el párrafo) a mano con un margen izquierdo. Existe un grave problema en un navegador y es que IE6 que no lo hace correctamente y puedes llevarte una sorpresa porque desplaza el párrafo hacia la derecha más de lo debido. Esto es un problema porque puede ponerte la imagen fuera del alcance visual o deformarte la plantilla. Ya sabemos todos que IE6 desespera a muchos programadores web pero voy a intentar encontrar una fácil solución.

Solucionando el problema en IE6

Después de hacer muchas y muchas pruebas en los navegadores anteriores y en IE6 (el único que fallaba), encontré una simple solución que hará que podamos centrar la imagen en la mayoría de navegadores incluido IE6. Únicamente se trata de añadir al código del párrafo lo siguiente:

display: inline;

Lo más rápido para centrar en pantalla posiblemente sea hacerlo visualmente, aunque puedes calcularlo matemáticamente. Por lo tanto, si el ancho donde se escribe en esta web es aproximadamente 700px y el ancho del recorte es 66px, tenemos: 700/2 = 350px-33px = 317px (aproximadamente y a partir de aquí lo corrijes a mano). El código final y el ejemplo es el siguiente:

<p style="overflow: hidden; float: left; display: inline; margin-left: 317px;">
<img style="margin: -55px -216px -112px -140px;"
src="/imagen/imagen_ejemplo.png" /></p>
<p style="clear: both;">Espero que este código...</p>

El resultado (obsérvalo en varios navegadores):

Imagen recortada

Espero que este código que es muy sencillo te sea útil. Puedes ver que funciona en IE6 e incluso en IE5.5 y en todos los navegadores que hemos comentado en este artículo. Vuelvo a repetir que puedes visualizar este tutorial desde cualquier navegador para hacer tú mismo la prueba.

Veremos más adelante otra forma de hacerlo con el uso de la propiedad clip y algunas configuraciones curiosas en determinados navegadores.

Última actualización: Viernes, 21 Febrero 2014

Comentarios   

Asustado
0 # Asustado 23-12-2013 21:12
¿y cómo centraríamos automáticamente la imagen dentro del marco flotante? º-º
Responder | Responder con una citación | Citar
Editor
0 # Editor 23-12-2013 23:30
Te recomiendo leer la parte II. Corrige código de más y permite un perfecto centrado sin márgenes.
El enlace lo verás al final del artículo.
Responder | Responder con una citación | Citar
Asustado
+1 # Asustado 23-12-2013 20:53
Cuek! Cuando vi ese diagrama me asusté ._. y nada que ver, sólo era una imagen ¬¬ jeje!
Responder | Responder con una citación | Citar
guiberraMX
+1 # guiberraMX 07-05-2013 11:11
Muy bueno, básico y funcional...
Responder | Responder con una citación | Citar
Editor
+1 # Editor 07-05-2013 12:29
Yo te recomiendo el 2º tutorial, que es más sencillo y no necesitas poner la imagen en modo flotante.
Aquí:
http://www.karmany.net/index.php/programacion-web/28-programacion-web-general/212-cortar-y-centrar-imagenes-con-html-y-css-ii

Salu2
Responder | Responder con una citación | Citar
sergio
+3 # sergio 25-02-2013 22:07
al 100 hermano me funciono gracias¡¡¡¡¡¡¡¡
Responder | Responder con una citación | Citar
karmany
+1 # karmany 25-02-2013 22:28
Me alegro, un saludo :lol:
Responder | Responder con una citación | Citar

Escribir un comentario

Antes de publicar un comentario, usted debe aceptar nuestras condiciones de uso: Condiciones de uso


 
Visitas: 1936816