Foros del Web » Creando para Internet » CSS »

Centrar imagen que no se conoce el ancho en un div

Estas en el tema de Centrar imagen que no se conoce el ancho en un div en el foro de CSS en Foros del Web. A ver, lo que necesito es centrar una imagen rectangular horizontal, dentro de un marco. El marco es cuadrado, y la parte que sobresale de ...
  #1 (permalink)  
Antiguo 17/01/2008, 13:00
Avatar de taote  
Fecha de Ingreso: noviembre-2003
Mensajes: 44
Antigüedad: 20 años, 4 meses
Puntos: 0
Pregunta Centrar imagen que no se conoce el ancho en un div

A ver, lo que necesito es centrar una imagen rectangular horizontal, dentro de un marco.

El marco es cuadrado, y la parte que sobresale de la imagen las escondo porque activo la propiedad overflow:hidden del marco.

Para el tamaño de la imagen, lo controlo, poniendole un tamaño máximo mediante css, y a partir de ahi que calcule el ancho.

El problema lo tengo cuando quiero centrar la imagen dentro del marco, al principio habia puesto a la imagen margin-left: -25%; y funciona si tiene un ancho suficiente, pero si la proporción de la imagen no lo permite, en vez de centrarla, lo que hace es dejar una marco vacio al lado derecho.

He buscado soluciones para centrar, pero necesito conocer el ancho de la imagen, y ese es desconocido, solo se la altura. Repito que serian imagenes rectangulares donde el ancho es mayor que la altura. Y haciendo un text-align:center para el marco no me funciona.

Alguna idea. Gracias.
  #2 (permalink)  
Antiguo 17/01/2008, 13:27
 
Fecha de Ingreso: enero-2008
Ubicación: #Callao {Lima:Perú;}
Mensajes: 144
Antigüedad: 16 años, 2 meses
Puntos: 7
Re: Centrar imagen que no se conoce el ancho en un div

Holas taote

Puedes usar el margin : 0 auto; aunque mejor lo pondrías la imagen en el CSS y de ahy si lo podrías centrar.

Utilizando esto:

Cita:
background : url('direccion image') no-repeat top center;
Saludos.
  #3 (permalink)  
Antiguo 17/01/2008, 18:03
 
Fecha de Ingreso: septiembre-2007
Mensajes: 184
Antigüedad: 16 años, 6 meses
Puntos: 4
Re: Centrar imagen que no se conoce el ancho en un div

Es obligatorio indicar un width concreto para centrar con margin {0 auto}, o al menos eso creo recordar. Ese width no tiene porque ser un numero fijo en pixels, puede ser un porcentaje %, em etc...
  #4 (permalink)  
Antiguo 18/01/2008, 12:26
Avatar de taote  
Fecha de Ingreso: noviembre-2003
Mensajes: 44
Antigüedad: 20 años, 4 meses
Puntos: 0
Re: Centrar imagen que no se conoce el ancho en un div

Si, para utilizar el auto, es necesario indicar el ancho. El problema aqui es que yo limito por alto. Y desconozco el ancho.

Y, no puedo ponerlo como fondo en css, porque son imagenes que se van cargando dinamicamente.

Gracias por las respuestas. ¿Alguien sabe alguna solucion?
  #5 (permalink)  
Antiguo 18/01/2008, 18:56
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 5 meses
Puntos: 7
Re: Centrar imagen que no se conoce el ancho en un div

No encuentro otra función para centrar en CSS.

Has probado con la funcion HTML iframe???
__________________
-
  #6 (permalink)  
Antiguo 19/01/2008, 04:55
Avatar de riskbert  
Fecha de Ingreso: diciembre-2007
Mensajes: 53
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: Centrar imagen que no se conoce el ancho en un div

Prueba con margin-left:auto y margin-right:auto

A mi me ha funcionado

Mira si quieres mi web y css http://www.tusclasesparticulares.com
  #7 (permalink)  
Antiguo 19/01/2008, 05:15
Avatar de aloqui  
Fecha de Ingreso: diciembre-2007
Mensajes: 973
Antigüedad: 16 años, 3 meses
Puntos: 24
Re: Centrar imagen que no se conoce el ancho en un div

Quizá no sea muy elegante, pèro puedes probar con el elemento <center>:
Código:
<center>
  <img src=...  />
</center>
__________________
Grupos de Música
Pop Music Stars
  #8 (permalink)  
Antiguo 19/01/2008, 05:57
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Re: Centrar imagen que no se conoce el ancho en un div

Aplícale a la imagen un margin: auto; display: block;
__________________
Javascript Códigos - Bambú difunde
  #9 (permalink)  
Antiguo 21/01/2008, 05:47
Avatar de taote  
Fecha de Ingreso: noviembre-2003
Mensajes: 44
Antigüedad: 20 años, 4 meses
Puntos: 0
Sonrisa Re: Centrar imagen que no se conoce el ancho en un div

SOLUCIONADO

El problema era que la imagen dentro del marco, tenid activada la propiedad float: left, si se la quito y le pongo margin: 0 -25% consigue el efecto deseado.

Gracias por las respuestas.
  #10 (permalink)  
Antiguo 21/01/2008, 11:25
Avatar de CrepitantE  
Fecha de Ingreso: octubre-2006
Ubicación: Colombia
Mensajes: 421
Antigüedad: 17 años, 5 meses
Puntos: 7
Re: Centrar imagen que no se conoce el ancho en un div

Huy vaya que si nos puso a pensar este problema. Solo era cuestion de un simple float.
__________________
-
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 08:32.