redimensionar-imagenes-css-smileycat

En SmileyCat publican 2 métodos para redimensionar imágenes con CSS, de forma sencilla, aunque poco estándar. Si conocéis otros métodos podéis dejarlo en los comentarios.



Método 1

El primer método usa una imagen de fondo, aunque no recomiendo esta solución porque (además de que la imagen está fuera del contenido) las imágenes no se pueden poner en el centro del div y usar un div vacío queda muy mal, en mi opinión:

Código CSS

.resize {
  background: url(image.jpg) -130px -140px no-repeat;
  border: 3px double #fff;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  width: 12em;
}

Código HTML

<div class="resize"></div>


Método 2

Este método es más estándar y eficaz, coloca la imagen dentro del div, con lo que podemos centrarla dentro de este.

Código CSS

.resize2 {
  border: 3px double #333;
  float: left;
  height: 12em;
  margin: .2em 1em 1em 0;
  overflow: hidden;
  width: 12em;
}

.resize2 img {
  margin: -220px 0 0 -210px;
  padding: 6em 0 0 6em;
}

Código HTML

<div class="resize2"><img src="image.jpg" alt="imagen" /></div>


Estandarización

CSS 2.1 válido.

XHTML 1.0 strict válido.

Ejemplo de su funcionamiento

Ver un ejemplo de su funcionamiento




Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!