CSS

Cómo recortar y centrar una imagen con CSS y HTML

En esta ocasión vamos a resolver un problema que se puede presentar en cualquier desarrollo web, ya sea algo complejo o simple, el cual trata de recortar y centrar una imagen para que siempre tenga un tamaño fijo. Este inconveniente se suele presentar cuando la aplicación que se quiere crear debe mostrar imágenes de un mismo tamaño sin que se desformen, pero originalmente son rectangulares. Para solucionar el problema en este sencillo tutorial vamos a publicar un breve código CSS, el cual se va a encargar de centrar y recortar la imagen.

Es muy importante aclarar que para realizar esta tarea no es necesario utilizar el lenguaje de programación Java Script o jQuery.

Cómo recortar y centrar una imagen con CSS, para fijar su tamaño

Para empezar a resolver esta tarea primero vamos a necesitar una etiqueta div que funciones como el contenedor de tamaño fijo de la imagen que queremos mostrar recortada y centrada:

<div class="container">
    <img class="crop" src="http://lorempixel.com/600/100" />
</div>

Si no incluimos ningún CSS la imagen anterior se va a visualizar del tamaño 600×100 píxeles, en cambio con el siguiente código vamos a poder recortarla y centrarla para que su tamaño final sea de unos 200px, el cual puede variar de acuerdo a la necesidad del momento, modificando los valores:

.container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
.container > .crop {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

Es muy importante que la imagen tenga posición absoluta y su contenedor relativa para que se pueda centrar correctamente sin depender del tamaño original. Para poder probar ese ejemplo simplemente se debe copiar el código en un archivo HTML y luego visualizarlo en el navegador.

Bueno gente, llegamos al final de este breve tutorial, en caso de que tengan alguna duda o inconveniente no duden en dejar un comentario al final de la página.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *