[SOLUCIONADO] Problema con width

[iEnrique]

Hola,
no soy capaz a hacer una cosa y os la explico brevemente; lo que tengo es una especie de imágenes de perfil, en la que la gente sube una imagen de perfil pero claro, esa imagen de perfil debe de ser optimizada a un tamaño en concreto para que quepa en los lugares donde la pongo y lo tengo así:

Código CSS:

<div style="background-color:#FFF;height:100px; width:100px; border-radius:50%;margin-top:42px;">
                    <img src="<?php echo $de['img_perfil']; ?>" height="100"></img>
                </div>
 

¿Qué es lo que pasa? Lo que me aparece es la imagen con la medida de 100px pero con una medida de width de más de 100px (como aparece en la imagen que he subido optimizada, lo comprendo perfectamente) pero para eso, yo he puesto un div por encima que pone la medida que quiero por lo que debería comerse todo el width que sobra fuera de la medida porque la imagen está dentro del ese div, pero... ¡¡no funciona!! La imagen no respeta las medidas del div, es como si se saliera del div, ¿me podríais ayudar?

Muchas gracias, espero que sepáis arreglármelo os estaré muy agradecido.

[pzin]

Puedes aplicarle un max-width a la imagen, para que su tamaño máximo sea el 100% de la capa.

Código CSS:

max-width: 100%;
 

O si quieres que se oculte lo que sobrepase de la capa, puedes aplicarle a la capa un overflow:

Código CSS:

overflow: hidden;
 

Cuando preguntes en este foro, como en cualquier otro, intenta no dejar código de otros lenguajes, porque no interesa verlo y se ve todo más fácil. Aquí con HTML y CSS va bien.

[iEnrique]

Muchas gracias! Y también por el consejo.

[iEnrique]

Perdón por el doble post y marcarlo como solucionado, pero no me funciona. Se expande y le pongo overflow y no me lo esconde, lo que digo es que si quiero que se ponga en una medida 100px por 100px que el width de la imagen que se sale del width: 100px; se esconda. ¿Cómo puedo hacer eso?

[pzin]

¿El overflow se lo estás poniendo al div? No es a la imagen que se lo tienes que pones sino a su contenedor.

[iEnrique]

¡Ya me funciona! Muchas gracias pero una pregunta de opinión, Para las imágenes de perfil, ¿se haría así o de otra forma? ¿Cómo lo harías tu? Gracias.

[pzin]

No lo haría muy diferente a cómo lo has hecho la verdad.

Igual aplicándole un max-width y max-height a la imagen bastaría. Así controlas que no exceda en una de las dos medidas. Pero depende mucho del propio diseño del sitio. A veces no hace falta un max-height porque no importa que crezca hacia abajo.
Ten en cuenta que si pones ese max-height, puede afectar al ancho, ya que si alcanza ese máximo, para mantener la proporción de la imagen, el ancho tomará su parte proporcional del alto máximo indicado.

Como digo al final depende mucho del propio ecosistema; diseño, espacio disponible, limitaciones a la hora de subir el archivo por parte del usuario, etc.

Personalmente no me gusta mucho terminar ocultando parte de la imagen, porque es un comportamiento que el usuario no espera.

[iEnrique]

Es por eso que me da cosa... Mira esta es la web que estoy haciendo para practicar y me gustaría que le dieras un vistazo rápido para que me digas tu opinión, ¿tu lo dejarías indicando un height y un width y que se achate la imagen en todo caso o que se elimine parte de la imagen? Es una de las cosas que me da cosa, el usuario no se espera que vaya a suceder eso de la imagen, espero que sepas sacarme de dudas. Muchas gracias, todas tus respuestas me sirven de aprendizaje.

[pzin]

¿Cuál es la web dices?

Yo haría algo así de forma general, pero como digo depende mucho del sitio:

Código CSS:

img.perfil {
  max-width: 100px;
  max-height: 100px;
}
 

Así mediría un máximo de 100*x o x*100, donde x siempre va a ser un número igual a 100 o menor.

[iEnrique]

¡¡Perdona!! Siempre me pasa lo mismo, igual con los correos, que se me olvida adjuntar las cosas jajajaja aqui tienes www.lemite.uni.me XDD

Respecto a lo que me has dicho, la altura de la imagen de perfile en los perfiles es de 100x100 por lo que quedaría achatada si le pongo un máximo tan bajo (creo yo).

[refielt]

.img{ height:100%; width: auto;}
.contenedor-de-imagen{ width:100px; height:100px; overflow:hidden;}

[iEnrique]

Iniciado por refielt

.img{ height:100%; width: auto;}
.contenedor-de-imagen{ width:100px; height:100px; overflow:hidden;}

Muchas gracias ya lo sabía pero intentaba intento encontrar lo más adecuado , pero de todas formas lo tomaré como una sugerencia, gracias