¿Centrar una imagen en un div demasiado pequeño para eso?

Question

así que tengo un div en mi cuerpo que es un ancho de porcentaje, y en el interior que un div con estilo en línea de la siguiente manera:

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden; 

Como se puede ver, tengo text-align: center; en, lo que, si la imagen se suficientemente pequeño para el div, centre la imagen. Pero el porcentaje de ancho div definitivamente no va a ser lo suficientemente grande en mi pantalla 1280x800.

Los márgenes negativos son superar algunos rellenos en su matriz div. El overflow:hidden hace que las cosas se vean como quiero, no desordenado. Por lo tanto, está funcionando como yo lo quiero, como la imagen del encabezado en onenaught.com. Se volverá más visible a la derecha a medida que amplíe el navegador, pero no se expanda desde ambos lados, porque no está centrado.

Entonces, me pregunto si hay alguna manera de centrar la imagen. ¿Sabes de alguno?

Editar: página here.

Answer 1

Una opción sería posicionar completamente la imagen con left: 50% y luego usar un margen negativo a la izquierda en la imagen igual a la mitad del ancho de la imagen. Por supuesto, esto requiere que el contenido div tenga su posición de posicionamiento relativa o absoluta para proporcionar el tipo de contenedor adecuado para que la imagen se posicione en su totalidad.

La otra opción (y probablemente sea mejor) es en lugar de usar una etiqueta de imagen, simplemente configure la imagen como fondo para el elemento primario y use el background positioning CSS attributes para centrarlo. Esto no solo asegura que esté centrado sin forzar el posicionamiento absoluto, sino que también genera un desbordamiento automático, por lo que el atributo de desbordamiento no es necesario.

Answer 2

considerar el uso de la imagen como fondo;)

uso background-position para conseguir lo que desea.

es posible que necesite una solución Javascript para lograr multi-navegador consistentes resultados

Answer 3

Usted puede hacer esto mediante el establecimiento de la margin-left y margin-right sobre la imagen para -100%.

Aquí hay un jsFiddle demostrando esto. (utilizar la de abajo en su lugar, es mejor)

es una idea aún mejor para establecer el margin-left y margin-right sobre la imagen para un número negativo mucho mayor, por ejemplo, -9999%, al igual que con el valor -100%, la imagen comienza a moverse fuera del centro en cuanto los div 's elemento que contienen vuelve menos amplia de 3 veces el ancho de la div:

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

puede comprobar el diferencia en el comportamiento entre este jsFiddle y el anterior al alternar el desbordamiento a visible y cambiar el tamaño de la ventana de resultados a menos de 300% del ancho del div.

Citando @MaxOriola en la gama de navegadores compatibles (a partir de los comentarios):

He secundario a realizar la prueba ... en Firefox, Chrome, Safari (últimas versiones) y Explorer 8, 9, 10. Funciona bien en todos ellos.

Nota: elemento de imagen tiene que ser visualizado inline o inline-block y centrado horizontalmente con text-align: center (el elemento de envoltorio).

// ALL of the JS below is for demonstration purposes only 
 

 
$(document).ready(function() { 
 
    $('a').click(function() { 
 
    $('body > div').toggleClass('overflow'); 
 
    }); 
 
})

img { 
 
    margin: 0 -9999% 0 -9999%; 
 
} 
 

 

 
/* ALL of the CSS below is for demonstration purposes only */ 
 

 
body { 
 
    text-align: center; 
 
    font-family: verdana; 
 
    font-size: 10pt; 
 
    line-height: 20pt; 
 
} 
 

 
body>div { 
 
    margin: 0px auto; 
 
    width: 40%; 
 
    background-color: lightblue; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    vertical-align: top; 
 
} 
 

 
.overflow { 
 
    overflow: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>40% wide div [<a href="#">toggle overflow</a>] 
 
    <div> 
 
    <img src="http://lorempixel.com/400/200" /> 
 
    </div> 
 
    400px wide image 
 
</div>

Answer 4

he encontrado otra solución

<style type="text/css"> 
    .container { 
     width:600px; //set how much you want 
     overflow: hidden; 
     position: relative; 
    } 
    .containerSecond{ 
     position: absolute; 
     top:0px; 
     left:-100%; 
     width:300%; 
    } 
    .image{ 
     width: 800px; //your image size 
    }   
</style> 

y en el cuerpo

<div class="container"> 
    <div class="containerSecond"> 
     <image src="..." class="" /> 
    </div> 
</div> 

Esto centrará su imagen cada vez que el contenedor es más grande o más pequeño. En este caso, su imagen debe ser mayor que 300% del contenedor para no centrarse, pero en ese caso puede hacer con contenedor Segundo mayor, y funcionará

Answer 5

Usando css transform, para una imagen dentro de un contenedor con overflow: hidden y una anchura conjunto:

img { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
    display: block; /* optional */ 
} 

jsFiddle here (I prestado parte de jsFiddle de Mathijs Flietstra, así que gracias).