Ver Mensaje Individual
  #6 (permalink)  
Antiguo 11/05/2015, 06:51
MatyD
 
Fecha de Ingreso: septiembre-2012
Mensajes: 17
Antigüedad: 11 años, 7 meses
Puntos: 0
Respuesta: Problema para centrar una imagen reducida de tamaño

Cita:
Iniciado por fede5426 Ver Mensaje
Proba esto:

Código CSS:
Ver original
  1. .logo {  
  2.     max-width: 600px;
  3.     margin:0 auto 15px auto;
  4. }
  5.  
  6. .img_logo{
  7.    width:100%;
  8. }

Usando solo eso la imagen tiene el tamaño original, está centrada y se ajusta según el ancho de la ventana.

[url]http://codepen.io/anon/pen/xGZJOw[/url]

PD: Para comentar CSS se usa /* comentario */.. con la doble barra no se comenta nada

Es cierto mil disculpas jaja ya decía yo que me parecía raro que no se pusieran en gris las lineas :P

de todas formas la imagen sigue sin qeudar centrada al estar reducida de tamaño. Yo necesito que se muestre al 50% maximo

Pero ahora ya con tu código y poniendo el max width en 300 que es la mitad del tamaño de la imagen en lugar de 600 la pude centrar.

Pero pensé que podría haberlo hecho con porcentajes ya que si en algún momento el logo se agranda porque cambia la imagen el código no va a ser reutilizable ya que debo editar unidades absolutas aquí el logo siempre va a tener 300px de ancho aunque la imagen que me brinden para el logo mida más de 600 o menos de 600 la idea es que ocupe el 50% del tamaño de la imagen y quede centrada sin importar el tamaño real de la misma.

Por ahora me sirve al conocer las medidas exactas de la imagen pero que pasaría si desconociera estas medidas?

podremos encontrar alguna solución usando porcentajes?

Ya que aquí tienes el codepen para ver como queda al utilizar porcentajes. como verás sigue estando a la izquierda al eliminar el max-width

http://codepen.io/anon/pen/oXbMNx