Centrar imagen verticalmente (CSS/Jquery)

E

ErCordobes #1 Ago '15

Hola muy buenas a todos! Os propongo esta duda a la cual no consigo encontrarle una solución optima.

Tengo una imagen que va ocupar un width:100% y height:auto; en CSS. Es mucho más ancha que alta. Y quiero colocarla justo en el centro da la página verticalmente. Y que conforme vaya cambiando la resolución de la pantalla se vaya centrando también. He probado diferentes formas tanto con jquery como con CSS pero siempre hay algún fallo, ninguna funciona 100% como yo quiero. ¿Qué haceis/hariáis vosotros cuando os pasa esto?

Un saludo y gracias de antemano.

LR #2 Ago '15 Penitente

#1 prueba esto

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <img src="tu_imagen" alt="imagen">
    </div>
</body>
</html>

style.css

div {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

1 1 respuesta

E

ErCordobes #3 Ago '15

#2 Hola compañero, eso es la última opción que contemple antes de intentarlo con jquery. Funcionaba bien, salvo que en el margen izquierdo se me quedaba un margen blanco pequeño, y me aparecía la barrita de overflow horizontal. Era como si desplazase la imagen 3 px aproximadamente hacia la derecha.

Ahora con jquery me sale bien siempre y cuando no sea la primera recarga de la web y minimice un poco el navegador. A partir de ahí ya me funciona bien.Sea la situación que sea. El código que tengo es este:

el div wrapper lo tengo con position: relative.

Un saludo y gracias de antemano.

1 respuesta

LR #4 Ago '15 Penitente

#3 y probaste con el overflow: hidden?

1 1 respuesta

E

ErCordobes #5 Ago '15

#4 Hola! El principal problema de esto, es que se desplaza la imagen un poco hacia la derecha dejando un margen blanco a la izquierda, por lo que aunque esconda la barra horizontal el problema no se soluciona. El objetivo es que la anchura de la imagen sea 100% respecto a la pantalla. Como te imaginaras si queda un margen blanco a la izquierda, pero no a la derecha es un poco anti-estético. He probado ya mil cosas, pero no consigo hacerlo funcionar del todo bien. De todas las opciones probadas, la que tú me has recomendado es la que mejor funciona, el único problema es que se desplaza la imagen un poquito hacia la derecha. Pongo una web de ejemplo del efecto que quiero conseguir: http://www.p-sem.com/

Si te fijas, la imagen de bienvenida siempre permanece en el centro, sea cual sea la dimensión de la página. Eso es lo que busco, pero no hay manera

Un saludo y gracias LR.

bLero #6 Ago '15

#1 Aquí tienes:

http://jsfiddle.net/ybgnty3s/

1 1 respuesta

E

ErCordobes #7 Ago '15

#6 Muchísimas gracias compañero funciona muy bien!! Una pregunta, lo has hecho nada más mirar la web o has usado alguna herramienta para obtener el código? Yo es que aparte de la típica herramienta para desarrolladores del propio navegador no conozco ninguna más xD.

Un saludo y muchísimas gracias de nuevo!!

1 respuesta

bLero #8 Ago '15

#7 He mirado el código de la web con el inspector de chrome. Para sacar la imagen más que nada.

Lo que querías se puede hacer de varias formas, la más limpia me parece esa que he puesto. La clave es el background-size: contain;

E

ErCordobes #9 Ago '15

Vale ^^ Muchas gracias voy tomando nota para aprender compañero .

Un saludo.

Centrar imagen verticalmente (CSS/Jquery)

Usuarios habituales

Tags