¿Cómo centro una imagen si es más ancha que su contenedor?

Normalmente, centra las imágenes con display: block; margin: auto display: block; margin: auto , pero si la imagen es más grande que el contenedor, se desborda hacia la derecha. ¿Cómo lo hago desbordamiento a ambos lados por igual? El ancho del contenedor es fijo y conocido. El ancho de la imagen es desconocido.

HTML

 

CSS

 .image-container { width: 150px; border: solid 1px red; margin:100px; } .image-container img { border: solid 1px green; } 

jQuery

 $(".image-container>img").each(function(i, img) { $(img).css({ position: "relative", left: ($(img).parent().width() - $(img).width()) / 2 }); }); 

1.

Véalo en jsFiddle: http://jsfiddle.net/4eYX9/30/

Una solución pura de CSS

Requiere una envoltura extra (probado en FireFox, IE8, IE7):

Respuesta mejorada

Hubo un problema con la respuesta original (a continuación). Si la imagen es más grande que el contenedor en el que se centra el outer con sus márgenes automáticos, entonces trunca la imagen de la izquierda y crea un espacio excesivo a la derecha, como se muestra en este violín .

Podemos resolver eso flotando en el inner derecho y luego centrándonos desde el derecho. Esto todavía trunca el img de la página hacia la izquierda, pero lo hace presionándolo explícitamente de esa manera y luego se centra en eso, cuya combinación es lo que impide el desplazamiento horizontal adicional a la derecha. Ahora solo obtenemos la cantidad de desplazamiento a la derecha que necesitamos para ver la parte correcta de la imagen.

Ejemplo de Fiddle (Los bordes en violín son sólo para demostración).

CSS esencial

 div.outer { width: 300px; /* some width amount needed */ margin: 0 auto; overflow: visible; } div.inner { position:relative; float: right; /* this was added and display removed */ right: 50%; } div.inner img { position: relative; right:-50%; /* this was changed from "left" in original */ } 

Si no deseas ningún desplazamiento derecho para imágenes amplias

Luego, usando lo anterior, también configure cualquier elemento que se vuelva outer ( como un body o un tercer contenedor ) para que se overflow: hidden .


Idea original (para la historia)

Ejemplo de Fiddle (Los bordes en violín son sólo para demostración).

HTML

 

CSS

 div.outer { width: 300px; /* some width amount needed */ margin: 0 auto; overflow: visible; } div.inner { display: inline-block; position:relative; right: -50%; } div.inner img { position: relative; left:-50%; } 

Aquí hay una solución CSS de 2 líneas (un par de líneas más pueden ser necesarias para el soporte de varios navegadores):

 img { margin-left: 50%; transform: translateX(-50%); } 

La solución CSS pura alternativa es usar el atributo de transform :

HTML:

 

CSS:

 .outer { position: relative; width: 100px; border: 1px solid black; height: 150px; margin-left: 100px; /* for demo */ /* overflow: hidden; */ } img.image { width: 200px; opacity: 0.7; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } 

Violín

Solo para agregar un overflow:hidden div overflow:hidden para padres para ocultar el área adicional de la imagen.

Su mejor opción es establecerlo como imagen de fondo del contenedor.

 #container { background: url('url/to/image.gif') no-repeat center top; } 

De hecho, hay un modo css / html puro más simple (sin desplazamiento horizontal grande):

Html :

 

Css :

Si no quieres ver el desbordamiento de la imagen

 div.outer img { position: absolute; left: -50%; z-index:-1; } div.outer { overflow: hidden; position: relative; height: 200px; } 

Con desbordamiento de imagen visible

 div.outer img { position: absolute; left: -50%; z-index:-1; } div.outer { overflow: visible; position: relative; height: 200px; } body, html { overflow-x:hidden; } 

Una solución de fondo con desbordamiento de imagen visible:

Html :

 

Css :

 div.outer { width: 100%; height: 200px; } div.inner { background: url('/assets/layout/bg.jpg') center no-repeat; position: absolute; left: 0; width: 100%; height: inherit; } 

asumiendo que el exterior está en un contenedor de ancho especificado.

Solo puedo pensar en una solución de Javascript, ya que lo que debes hacer es colocar relativamente la imagen una cantidad negativa a la izquierda de su contenedor:

jQuery

 $(document).ready(function(){ var theImg = $('#container img'); var theContainer = $('#container'); if(theImg.width() > theContainer.width()){ theImg.css({ position: 'relative', left: (theContainer.width() - theImg.width()) / 2 }) } }) 

No creo que haya una solución pura de CSS (excepto la siguiente respuesta :)). Sin embargo, con Javascript sería solo cuestión de encontrar el ancho de la imagen, restando el ancho del contenedor, dividiendo por dos y tienes la distancia a la izquierda del contenedor que necesitas.

Encontré que esta es una solución más elegante, sin flexión, similar a algo anterior, pero más generalizada (se aplica tanto en vertical como en horizontal):

 .wrapper { overflow: hidden; } .wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* height: 100%; */ /* optional */ }