css - style - Centro imagen de gran tamaño en div

html title attribute

Question

He estado tratando de ordenar cómo centrar una imagen de gran tamaño dentro de un div usando solo CSS.

Estamos utilizando un diseño fluido, por lo que el ancho de los contenedores de imágenes varía a medida que lo hace el ancho de página (la altura de div es fija). La imagen se encuentra dentro de un div, con el valor de una sombra de cuadro insertada para que parezca como si estuviera mirando a través de la página en la imagen.

La imagen en sí se ha dimensionado para llenar el div circundante en su valor más amplio posible (el diseño tiene un valor de max-width máximo).

Es bastante fácil de hacer si la imagen es más pequeña que la div circundante:

margin-left: auto;
margin-right: auto;
display: block; 

Pero cuando la imagen es más grande que el div, simplemente comienza en el borde izquierdo y está descentrada hacia la derecha (estamos usando overflow: hidden ).

Podríamos asignar un width=100% , pero los navegadores hacen un trabajo pésimo para cambiar el tamaño de las imágenes y el diseño web se centra en imágenes de alta calidad.

¿Alguna idea sobre el centrado de la imagen para que se overflow:hidden corta ambos bordes de manera uniforme?

Answer 1

Coloque una gran div dentro de la div, centre esa, y el centro la imagen dentro de esa div.

Esto lo centra horisontally:

HTML:

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

CSS:

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

Demostración: http://jsfiddle.net/Guffa/L9BnL/

Para centrarlo verticalmente también, puedes usar el mismo para el div interior, pero necesitarías la altura de la imagen para colocarlo absolutamente dentro de él.

Answer 2

El ancho y la altura son solo por ejemplo:

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Tiene que funcionar para usted si la parte superior izquierda y la parte superior de su div no son la parte superior e izquierda de la ventana de su pantalla. Esto funciona para mi.

Answer 3

Encontré que esta es una solución más elegante, sin flexión:

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

Answer 4

Esta es una Q antigua, pero una solución moderna sin flexbox o posición absoluta funciona así.

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

Entonces, ¿por qué funciona?
A primera vista, parece que cambiamos un 50% a la derecha y luego un 50% a la izquierda nuevamente. Eso daría como resultado un cambio cero, ¿y qué?
Pero el 50% no es lo mismo, porque el contexto es importante. Si calcula los márgenes relativos, el margen se calcula como porcentaje del elemento principal , mientras que en la transformación, el 50% es relativo al mismo elemento. Ancho que es para ambos.

Tenemos esta situación antes de agregar el CSS

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

Con el margin-left: 50% estilo agregado margin-left: 50% tenemos

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

Y la transform: translateX(-50%) desplaza hacia la izquierda

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

Desafortunadamente, esto solo funciona para el centrado horizontal ya que el cálculo del porcentaje de margen siempre es relativo al ancho. Es decir, no solo margin-left y margin-right , sino también margin-top e margin-bottom se calculan con respecto al ancho.

La compatibilidad del navegador no debería ser un problema: https://caniuse.com/#feat=transforms2d

Answer 5

No use ancho o alto fijo o explícito en la etiqueta de la imagen. En cambio, codifíquelo:

      max-width:100%;
      max-height:100%;

ex: http://jsfiddle.net/xwrvxser/1/

Answer 6

Prueba algo como esto. Esto debería centrar cualquier elemento grande en el medio vertical y horizontalmente con respecto a su elemento primario, sin importar sus tamaños.

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Answer 7

Soy un gran fanático de hacer de una imagen el fondo de un div / node, entonces puedes usar el atributo background-position: center para centrarlo independientemente del tamaño de la pantalla

Answer 8

Tarde en el juego, pero encontré que este método es extremadamente intuitivo. https://codepen.io/adamchenwei/pen/BRNxJr

CSS

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-item: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

HTML

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>