[SOLUCIONADO] Dolores de cabeza en el manejo de imágenes.

[Josecanalla]

Bueno, tengo una página web y un div de tamaño 300px por 300px dentro del cual coloco una imagen. El problema es que la imagen me la sube el usuario, por lo cual si la imagen no es aproximadamente cuadrada se ve muy mal al ser rediomensionada automáticamente por CSS.

Estuve leyendo sobre el atributo clip pero no me fué de gran ayuda, quería saber concretamente como puedo hacer para que la imagen se ajuste lo mas posible al div de 300 x 300 (obviamente puede ser necesario recortar alguna parte) sin que se deforme.

Muchas gracias!

[pzin]

Pues para que siga siendo una imagen, lo suyo sería usar clip. Pero esto sólo funcionará en elementos con posición absoluta y fija.

Luego podrías jugar con min-(height|width), con overflow, etc.

La única forma de hacerlo mediante CSS y que siempre quede bien sin deformarse, es poniendo la imagen como imagen de fondo y luego usar background-size:

Código CSS:

div {
  background-image: url(afoto.png);
  background-size: cover;
}
 

[Josecanalla]

Me sería de gran ayuda si me das un ejemplo de como usar clip, overflow y los min y max height y weight, ya que estuve probando pero no encontré solución.

Colocarle como imagen de background no es posible porque la url se la imagen se genera dinámicamente con PHP, y el CSS es obviamente estático.

Muchas gracias!

AGREGO: creo que colocando overflow:hidden se soluciona mi problema. Ahora tengo otra duda, ¿cómo puedo achicar la imagen, mediante CSS o HTML de manera que conserve su factor de forma?

[Rafael]

Yo solicitaría un script en php digamos para resamplear la foto. La gente te va a subir mastodontes de20Megapixeles.

[pzin]

Iniciado por Josecanalla

¿cómo puedo achicar la imagen, mediante CSS o HTML de manera que conserve su factor de forma?

Indica sólo una medida, alto o ancho, y la otra se calculará automáticamente.

[Josecanalla]

La visualización de las imagenes ya lo solucioné, con los max-width y max-height y centrando la foto en un contenedor, así quedó aceptablemente bien.

Me interesa eso de limitar el tamaño de las imagenes a subir, ¿cómo puede hacerse? En PHP o Javascript, me da igual.

[pzin]

Ya eso sería cosa de preguntar en el foro de PHP. Después de buscar en Google, claro.