Imagen estilo Messenger, autotamaño

[vitro012]

Hola a todos,

Estoy realizando un diseño en el cual requiero estar subiendo fotos o imagenes, estas se cargarán en la página de forma dinámica.

El detalle es que no siempre las fotos tienen las mismas dimenciones y si la dejo fija en algunas ocaciones estas se deforman.


Busco una solución similar a lo que hace el messenger en la foto de perfil, en caso de que las dimensiones de la imagen no sean las adecuadas, toma una sección de la imagen y la ajusta al tamaño de la capa o ventana donde se muestra.

espero haber podido explicarme.

Gracias

[_cronos2]

Si dices que vas a subir fotos entonces eso implica un script en el servidor. Deduzco que usas PHP, así que busca un script en PHP para trabajar con imágenes (ahora no me acuerdo como se llama, GD (?)).
Saludos (:

[mariomon17]

Te refieres a que al subir la imagen se trate y se redimensione,
o a que al mostrar la imagen esta se adapte al div en el que se encuentra?

Un saludo :)

[vitro012]

Normalmente uso la Libreria GD de PHP para crear la imagen ya re-dimencionada, pero me gustaría saber si hay otra forma de hacer algo similar.
Que al mostrar la imagen esta se adapte al div en el que se encuentra.

[mariomon17]

Se puede hacer con CSS simplemente. Pones la imagen como background del div y con las propiedades background-size y background-position defines tamaño y posicion (las medidas las puedes pasar desde el server u obtenerlas con JS para hacer los calculos).

Pero creo que la mejor opcion es server-side.

Un saludo :)

[vitro012]

Gracias cronos y mariomon.

Busco algo así.

Supongamos que tengo una imagen que mide 10X10 y una capa que mide 8x8.
en este caso no se mostraría un borde de la imagen de 2x2. ya que la capa solo mostraría 8x8 de la imagen.
Seria algo así como enmascar la imagen,

[_cronos2]

Depende, si quieres que se respete la esquina superior izquierda, o cualquier otra. Centrarla creo que sería más complicado, al menos ahora no se me ocurre cómo.
Si te vale con dejarla arriba a la izquierda:

Código CSS:

.thumbnail {
 width:8px;
 height:8px;
 background:url('foto.png') no-repeat left top;
}
 

Saludos (:
PD: background-size es parte de CSS3, no te recomiendo confiar en ello si quieres dar soporte a navegadores antiguos.

[mariomon17]

Código CSS:

.thumbnail {
 width:8px;
 height:8px;
 background:url('foto.png') no-repeat center;
}
 

Para centrarla solo hay que cambiar left top por center (el segundo valor automaticamente es center) y ya se centra.

Un saludo :)