css - recortar - imagen en div responsive

Cómo centrar el recorte de una imagen(<img>) en un contenedor de ancho de fluido

Question

¿Cómo consigo que una imagen permanezca centrada cuando su contenedor de ancho de fluido (porcentaje) es demasiado pequeño para mostrar toda la imagen?

¿Cómo puedo centrar la imagen dentro de su contenedor?

Esto significa que debe mostrar el centro de la imagen en lugar de los lados cuando el contenedor es demasiado pequeño.

Answer 1

Cuando funciona

Es posible que tenga un contenedor que contenga algún contenido, como dos <div> s que tengan un ancho del 50% cada uno, sentados uno al lado del otro. Para este ejemplo, podemos ilustrar solo un hijo del contenedor:

Vamos a nombrar el rectángulo externo .container , el rectángulo interno .content y la imagen img . Esta disposición está perfectamente bien, siempre y cuando .content sea ​​siempre más ancho que img .

Cuando se rompe

Como estamos tratando con porcentajes y probablemente trabajamos con un diseño receptivo, este no siempre es el caso. Si .content es más delgado que img , se producirá recorte:

El problema

Si la parte más interesante de img está en el centro, necesitamos que el navegador recorte ambos bordes de manera uniforme, dejando la mejor parte visible, sin importar el ancho de .content .

La solución

Afortunadamente, una solución es posible. Aún mejor, no se requiere marcado adicional.

.content {
    width: 90%; /* or whatever is required */
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

img {
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

Answer 2

Para navegadores nuevos, puede traducirlo

figure{
    width: 100%;
    text-align: center;
    overflow: hidden;
}
img{
    position: relative;
    left: 50%;
    transform: translate(-50%,0)
}

Para admitir IE8, aún puede usar la técnica presentada anteriormente por @BryceHanscomb.

.no-csstransforms figure img {
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

Answer 3

Si está anticipando que la imagen que se mostrará será mucho más larga que el contenedor de la pantalla, ajuste a la izquierda: 100%; y margen izquierdo: -200%; (de la respuesta de Bryce) podría no ser suficiente para obtener la parte central de la imagen. Solo pon un mayor porcentaje para ambos. Asegúrate de que el otro sea la mitad del otro.

left: 500%;
margin-left: -1000%;