Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con width

Estas en el tema de Problema con width en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/06/2013, 07:01
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Busqueda Problema con width

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:
Ver original
  1. <div style="background-color:#FFF;height:100px; width:100px; border-radius:50%;margin-top:42px;">
  2.                     <img src="<?php echo $de['img_perfil']; ?>" height="100"></img>
  3.                 </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.
  #2 (permalink)  
Antiguo 03/06/2013, 07:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 5 meses
Puntos: 2114
Respuesta: Problema con width

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

Código CSS:
Ver original
  1. 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:
Ver original
  1. 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.
  #3 (permalink)  
Antiguo 03/06/2013, 08:40
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con width

Muchas gracias! Y también por el consejo.
  #4 (permalink)  
Antiguo 03/06/2013, 13:07
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con width

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?
  #5 (permalink)  
Antiguo 03/06/2013, 14:56
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 5 meses
Puntos: 2114
Respuesta: Problema con width

¿El overflow se lo estás poniendo al div? No es a la imagen que se lo tienes que pones sino a su contenedor.
  #6 (permalink)  
Antiguo 05/06/2013, 07:07
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con width

¡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.
  #7 (permalink)  
Antiguo 05/06/2013, 07:30
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 5 meses
Puntos: 2114
Respuesta: Problema con width

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.
  #8 (permalink)  
Antiguo 05/06/2013, 08:05
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con width

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.
  #9 (permalink)  
Antiguo 05/06/2013, 08:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 5 meses
Puntos: 2114
Respuesta: Problema con width

¿Cuál es la web dices?

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

Código CSS:
Ver original
  1. img.perfil {
  2.   max-width: 100px;
  3.   max-height: 100px;
  4. }

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.
  #10 (permalink)  
Antiguo 05/06/2013, 08:23
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con width

¡¡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).
  #11 (permalink)  
Antiguo 05/06/2013, 08:33
Avatar de refielt  
Fecha de Ingreso: mayo-2011
Mensajes: 36
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Problema con width

.img{ height:100%; width: auto;}
.contenedor-de-imagen{ width:100px; height:100px; overflow:hidden;}
  #12 (permalink)  
Antiguo 05/06/2013, 08:45
Avatar de iEnrique  
Fecha de Ingreso: abril-2013
Ubicación: España
Mensajes: 346
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con width

Cita:
Iniciado por refielt Ver Mensaje
.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

Etiquetas: php, tamaño, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:28.