JMiur [E]

Hay cientos de formas de usar imágenes en miniatura y luego expandirlas; podemos emplear JavaScript, CSS o combinar ambas cosas pero, si no se quiere andar lidiando con muchos códigos y sofisticaciones, también podemos usar propiedades simples.

Así como width y height definen el ancho y alto de algún elemento, max-width y max-height nos permiten limitar esos tamaños y dar valores máximos. Por ejemplo, si desconocemos el tamaño de una imagen y queremos que no se desborde, basta establecer la propiedad max-width para que se muestre ... como pueda.

Funcionan igual que width y height así que no es necesario definir ambos datos, si establecemos max-width, la altura la calculará el navegador y será proporcional.; lo mismo ocurre si utilizamos max-height aunque a veces es necesario agregar ambas para insertar cosas en cierto contenedor que tiene un tamaño fijo.


Aprovechando esto, podríamos crear una clase y usarla en una etiqueta IMG donde colocaremos la imagen con su tamaño original:
<img class="expa" src="URL_imagen_original" />
Y ahora, escribimos las reglas:
<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>
La primera establece el tamaño máximo con que se mostrará la imagen y la segunda, elimina esa propiedad cuando ponemos el cursor encima.

8 comentarios:

Unknown  

Peru peru no me alcanza el tiempo ahhh seguir guardando, un encanto :P

Responder
Gem@  

Siempre nos decantamos por efectos más sofisticados a la hora de ampliar las imágenes (al menos yo)pero hay que reconocer que lo conseguido simplemente con CSS es mucho mejor porque siempre es menos pesado.

Responder
JMiur  

Esto no es algo para usar siempre pero es facilísimo de implementar y puede servir en muchos casos sin necesidad de librerías, scripts ni miniaturas extras.

Responder
Cientifico Catracho  

¡¡¡GRACIAS!!! andaba ocupando este código... eres un ídolo cibernético, apresiado por los bloggereños y a lo mejor por los webmasters... DTB :P

Responder
rachel  

es posible que en vez de ser una imagen pequeña sea un texto y al pasar el cursor salga la imagen???

plis me responde :$

Responder
JMiur  

No con este método.

Responder
rachel  

y existe alguno en esta pagina? o algun link de referencia que me puedas dar :$ plisssssssss

Responder
JMiur  

PAra eso tienes que usar alguna clase de script; depende de lo que quieras hacer. Una forma podría ser algo así, otra forma es usar ventanas modales simples como iBox.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR