Imágenes

Por defecto, la etiqueta <IMG> pone una imagen en linea, es decir no ocupa todo el ancho de pantalla pero no permite que otros elementos estén a su lado. Esto es fácilmente alterable usando float

<IMG SRC=URL [WIDTH=h] [HEIGHT=v] [ALIGN=left|right|top|middle|bottom] [BORDER=n]>

img{
   float: left;
   margin: 0 15px;
}

las imágenes flotantes se superponen entre si, si la propiedad float no se borra. Asegúrese de usar clear:both en la siguiente etiqueta luego de la sección donde su imagen este flotando.

En el ejemplo siguiente se ponen 3 imágenes en la misma linea porque no se borro la flotación de la primera imagen.

La propiedad ALIGN quedo fuera de HTML5, pero para el alineado horizontal se puede usar text-align en un contenedor de la etiqueta IMG.

También puedes usar margin, border y padding para manejar la separación de la imagen y otros elementos según convenga.

Aquí veremos algunos CSS exclusivos que se pueden aplicar a las imágenes en linea con la etiqueta IMG e imágenes de fondo con el atributo BACKGROUND.

• Tamaño imagen
• Vertical-align
• Imágenes sin borde
• Bordes redondeados
• Sombras
• Opacity

1. Tamaño de imagen

Con las propiedades WIDTH y HEIGHT es posible mostrar las imágenes a cualquier tamaño, independientemente de su tamaño original. No obstante si usas proporciones diferentes a las originales se deformara la imagen. Por otro lado definir cada imagen desde CSS recargaría tremendamente el código, por lo que se recomienda contradecir CSS y usar los propios 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. Vertical-align

Define el alineamiento vertical de la imagen.

img {
   vertical-align: bottom;
}

3. Imágenes sin borde

Cuando a una imagen la hacemos un enlace, los navegadores de forma predeterminada le pondrán un borde azul grueso. Esto elimina el borde de la imagen.

img {border: none;}

4. Border-radius

Al igual que con las cajas, las imágenes también se les puede redondear las esquinas. Se puede usar px | %.

border-radius: sup-izq sup-der inf der inf-izq;

5. Sombras

Se puede aplicar un filtro de sombra. Las imágenes con fondo transparente pueden beneficiarse del filtro CSS drop-shadow.

Los argumentos son similares a los de las propiedades text-shadow y box-shadow. Los dos primeros representan la distancia vertical y horizontal entre las sombras y la imagen, el tercero y el cuarto son el desenfoque y el radio de propagación de la sombra y el último es el color de la sombra.

filter: text-shadow() | drop-shadow();

img {
   filter: drop-shadow(0 0 5px blue);
}

Antiguamente se usaba este truco: que 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;
}

6. Opacity

Esta propiedad establece el nivel de opacidad de la imagen. Se usa valores entre 0 (transparente) y 1 (opaco).

opacity: 0 a 1;

Al usar la la propiedad opacity en un elemento, todos sus elementos hijos también se vuelven transparentes. Esto puede hacer que el texto dentro de un elemento totalmente transparente sea difícil de leer. Si no desea aplicar opacidad a los elementos secundarios, use valores de color RGBA() en su lugar.

7. Renderizado

Cuando se escala una imagen, el navegador suaviza la imagen para que no se vea pixelada. Pero, dependiendo de la resolución de la imagen y la pantalla, hay veces que esto no puede venirnos del todo bien. Puedes controlar este comportamiento del navegador con la propiedad image-rendering. Esta propiedad controla el algoritmo que se usa el navegador para escalar una imagen.

El valor crisp-edges mantiene el contraste de color entre píxeles. En otras palabras, no se suavizan las imágenes, lo que es genial para mostrar ilustraciones pixel-art.

Cuando usamos el valor pixelated, los píxeles cercanos de un píxel pueden recuperar su apariencia, haciendo que parezca que juntos forman un gran píxel, ideal para pantallas de alta resolución.

image-rendering: crisp-edges | pixelated;

8. Estirar imagenes

Se trata de dos propiedades contain | cover | fill. La primera ajusta la imagen al su contenedor. La segunda hace lo mismo pero manteniendo el aspecto, osea no se deforma. Recorta la imagen. La ultima estira la imagen para rellenar el contenedor.

object-fit: contain | cover | fill;

9. Background

background-image: logo.gif;
backgroud-size: auto;
backgroud-attachment: scroll;
backgroud-position: center;