centrar imagen con responsive desing.

Citar

Escrito el 27 Ago 2014 01:52 am

Hola amigos, mi consulta es la siguiente:

quiero centrar una imagen ( logo ) con css, no se como hacerlo es por este motivo que utilizo las antiguas etiquetas <center></center> el cual cumple la funcion, pero al mover el navegador para probar resoluciones, esta imagen se mueve solo un poco y despues se pierde.

utilizo este codigo :

<header class="grid_12">
<div class="logo"><center><img src="img/fancy-cakes.png" width="299" height="107"></center></div>

</header>

y su css es :

header{

width: 400px;
height: 130px;
margin-top: 50px;
}

[img]https://drive.google.com/file/d/0B-nc5k5wx4jvZUtzcmVrY3Q0enM/edit?usp=sharing[/img]

ojala me puedan ayudar hacer esta cabezara responsive o que se adapte lo mas posible sin deformar las imagenes..

saludos a todos!!

Por dessingyou

7 de clabLevel

Envíale un mensaje privado Web

diseñador web

@seba_alh

Citar

Escrito el 27 Ago 2014 05:54 pm

saca el center y prueba con .logo{margin:0 auto;}

Por Gamernoob

71 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Front-end :D

@nagash93

Citar

Escrito el 30 Ago 2014 04:09 pm

Yo tuve la misma pregunta pero la solucion no es tan complicada. Te voy a dar un ejemplo:

Yo tengo un div que mide 100px de ancho y 100px de largo
para centrarlo usare en el estilo css el : margin-top:50%; que hara que el div/imagen se centre.
El problema es que centra el lado izquierdo de la foto/div. El canto del objeto es el que esta en el centro.
Para eso utilizaremos este codigo CSS:

left:50%;
margin-left:-50; (menos la mitad del width de tu imagen)

espero que esto te ayude

Por PatrissTV

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 30 Ago 2014 06:04 pm

ya he probado con las dos opciones y claramente funcionan, el problema que tengo ahora es que la imagen se centra, pero al hacer que el nava navegador se "achique" un formato tipo movil la imagen se baja..

entonces es ahi cuando aplico al css un img {width: 100%}, pero aun asi una sola imagen se adapta.. el que seria el logo de cabezera se mueve pero no cambia el tamaño, puede ser que la imagen sea muy pequeña o ya del tamaño de un dispositivo movil y no requiera adaptarse ?? y como soluciono el que se baje unos pixeles al acortar el ancho del navegador?..

Por dessingyou

7 de clabLevel

Envíale un mensaje privado Web

diseñador web

@seba_alh

Citar

Escrito el 31 Ago 2014 07:54 am

He oido que el comando cover sirve para algo asi. Nunca lo he usado pero alomejor te sirve

Por PatrissTV

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 03 Sep 2014 08:32 pm

Hola, veo varias cosas, si quieres que la imagen se adapte al cambiar el tamaño del navegador, no puedes poner el ancho y alto en pixeles, porque siempre serán los mismos, aún si pones img {width: 100%;}, yo creería que de la siguiente manera te debe funcionar:

Código HTML :

<header class="grid_12">
<div class="logo"><img src="img/fancy-cakes.png"></div> 
</header>

Como ves al llamar la imagen no tiene el tamaño, este se le da por CSS

y su css es :

header{

width: 50%; //Dependiendo del tamaño que necesites lo cambias
margin-top: 50px; // El margen que quieras
}

header div.logo {
width: 50%;// le das el ancho dependiendo del espacio que quieras que ocupe del head
}

header div.logo img {
width: 100%;// la imagen ocuparía todo el ancho proporcionalmente del div con clase logo
}

Y para centrar cualquier elemento usas margin: 50px auto;
el 50 px es el margin arriba y abajo y el auto centra horizontalmente.

Espero te sirva

Por alejilla

Claber

120 de clabLevel

Genero:Femenino

Envíale un mensaje privado

Colombia

Citar

Escrito el 06 Sep 2014 03:34 am

Por lo general un 90% de valores en css se maneja con porcentajes.
Hay que encerrar la imagen en un contenedor para hacer referencia, pero en vez de asignar propiedades absolutas, le pongas porcentajes te pongo un ejemplo:

Código HTML :

<!DOCTYPE html>
   <html lang="es">
   <head>
         <meta charset="utf-8">
         <title></title>
   <style>
[css]      .logo{
         width: 100%;
         height: 600px;
         background: rgb(220,220,220);
      }
      .logo img{
         margin: 10% 0 0 40%;
         width: 20%;
         background-size: cover;
         background-position: center;
      }
[/css]   </style>
   </head>
   <body>
      <header>
            <div class="logo">
               <img src="img.jpg" alt="">
            </div>
      </header>
   </body>
</html>

Aqui te dejo los archivos para que los mires.

[url=https://drive.google.com/folderview?id=0B_VAoF4J6gmuZmFrVUpKWVItZms&usp=sharing][/url]

Es sencillo, espero te sea de ayuda.
:wink:

Por Alche

2 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 06 Sep 2014 11:07 am

Creo que hay un error en lo de la imagen {img}width:100% cuando deberia ser max-widht: 100% para que las imágenes se haga responsiva. Saludos!

Por Abraham Prieto

10 de clabLevel

Envíale un mensaje privado

centrar imagen con responsive desing.

Escribe una respuesta rapida