Imagenes

Por defecto, la etiqueta IMG es en linea, es decir no ocupa todo el ancho. Aqui veremos algunos CSS exclusivos que se pueden aplicar a las imagens en linea con la etiqueta IMG e imagenes de fondo con el atributo BACKGROUND.

1. Tamaño de imagen

Con las propiedades WIDTH y HEIGHT es posible mostrar las imagenes a cualquier tamaño, independientemenete de su tamaño original. No obstante si usas proporciones diferenctes a las originales se deformara la imagen. Por otro lado definir cada imagen desde CSS recararia tremendamente el codigo, por lo que se recomienda contradecir CSS y usar atributos de la etiqueta IMG

#imagen {
  width: 120px;
  height: 250px;
}

Mejor aplicar atributos de la etiqueta IMG.

<IMG SRC=imagen.jpg WIDTH=120 HEIGHT=250 />

2. Imagenes sin borde

Cuando a una imagen la hacemos un enlace, los navegadores por omision le pondran un borde azul grueso. Esto elimina el borde de la imagen.

img {border: none;}

3. Sombras

Este truco consiste en la usar de un par de elementos DIV alrededor del elemento que va a mostrar con sombra. La sombra se consigue mediante una imagen muy grande que contiene una sombra orientada hacia el lado inferior-derecho.

.dropshadow {
  float: left;
  clear: left;
  background: url(shadowAlpha.png) no-repeat bottom right !important;
  background: url(shadow.gif) no-repeat bottom right;
  margin: 10px 0 10px 10px !important;
  margin: 10px 0 10px 5px;
  padding: 0px;
}
.innerbox {
  position: relative;
  bottom: 6px;
  right: 6px;
  border: 1px solid #999999;
  padding:4px;
  margin: 0px;
}

Imagen genérica

4. Vertical-align

Define el alineamiento vertical de la imagen.

Valores de vertical-align
ValorDescripcion
baselineAlinea la línea base del elemento con la línea base del padre. Su comportamiento puede cambiar en un navegador u otro.
subAlinea la línea base del elemento con la línea subscript del elemento padre.
superAlinea la línea base del elemento con la línea superscript del elemento padre.
text-top
text-bottom
middle
top
bottom
absoluto(px,em)Medida absoluta respecto a la linea base del padre. Valores negativos estan permitidos.
relativo (%)Medida relativa respecto a la linea base del padre.
inheritHereda del padre
unsetNo usado
img {
	vertical-align: bottom;
}