Centra l'immagine sovradimensionata in Div

Ho cercato di capire come centrare un'immagine di grandi dimensioni all'interno di un div utilizzando solo CSS.

Stiamo utilizzando un layout fluido, quindi la larghezza dei contenitori di immagini varia in base alla larghezza della pagina (l'altezza del div è fissa). L'immagine si trova all'interno di un div, con un ombretto a riquadro inserito in modo da apparire come se si stesse guardando la pagina nell'immagine.

L'immagine stessa è stata dimensionata per riempire il div circostante al suo valore più ampio possibile (il design ha un max-widthvalore).

È abbastanza facile da fare se l'immagine è più piccola del div circostante:

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

Ma quando l'immagine è più grande del div inizia semplicemente sul bordo sinistro ed è fuori centro a destra (stiamo usando overflow: hidden).

Potremmo assegnare un width=100%, ma i browser fanno un pessimo lavoro di ridimensionamento delle immagini e il web design è incentrato su immagini di alta qualità.

Qualche idea sul centrare l'immagine in modo da overflow:hiddentagliare uniformemente entrambi i bordi?

Prova qualcosa del genere. Questo dovrebbe centrare qualsiasi elemento enorme nel mezzo in verticale e in orizzontale rispetto al suo genitore, indipendentemente dalle loro dimensioni.

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

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

}

Questa è una vecchia Q, ma una soluzione moderna senza flexbox o posizione assoluta funziona così.

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>

Quindi perché funziona?
A prima vista sembra che spostiamo di nuovo il 50% a destra e poi di nuovo il 50% a sinistra. Ciò comporterebbe uno spostamento zero, e allora?
Ma il 50% non è lo stesso, perché il contesto è importante. Se si utilizzano unità relative, un margine verrà calcolato come percentuale della larghezza dell'elemento principale , mentre la trasformazione sarà del 50% rispetto allo stesso elemento.

Abbiamo questa situazione prima di aggiungere il CSS

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

Con lo stile aggiunto margin-left: 50%che abbiamo

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

       a is 50% width of P

E i transform: translateX(-50%)turni tornano a sinistra

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

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

Sfortunatamente questo funziona solo per la centratura orizzontale poiché il calcolo della percentuale di margine è sempre relativo alla larghezza. Cioè non solo margin-lefte margin-right, ma anche margin-tope margin-bottomsono calcolati rispetto alla larghezza.

La compatibilità del browser non dovrebbe essere un problema: https://caniuse.com/#feat=transforms2d

Inserisci un div grande all'interno del div, centralo e al centro l'immagine all'interno di quel div.

Questo lo centra orizzontalmente:

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;
}

demo: http://jsfiddle.net/Guffa/L9BnL/

Per centrarlo anche verticalmente, puoi usare lo stesso per il div interno, ma avrai bisogno dell'altezza dell'immagine per posizionarlo assolutamente al suo interno.

In ritardo al gioco, ma ho scoperto che questo metodo è estremamente 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-items: 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>

Non utilizzare una larghezza o un'altezza fissa o esplicita per il tag immagine. Invece, codificalo:

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

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

sono un grande fan di rendere un'immagine lo sfondo di un div / nodo - quindi puoi semplicemente usare l' background-position: centerattributo per centrarlo indipendentemente dalle dimensioni dello schermo

La larghezza e l'altezza sono solo per esempio:

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

Deve funzionare per te se la parte sinistra e superiore del div del tuo genitore non sono la parte superiore e sinistra della finestra dello schermo. Per me funziona.

Ho trovato questa soluzione più elegante, senza flex:

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

Sulla base della grande risposta di @ yunzen:

Immagino che molte persone alla ricerca di questo argomento stiano cercando di utilizzare un'immagine di grandi dimensioni come immagine di sfondo di un "eroe", ad esempio su una homepage. In questo caso, vorrebbero spesso che il testo appaia sull'immagine e lo ridimensioni bene sui dispositivi mobili.

Ecco il CSS perfetto per tale immagine di sfondo (usalo sul <img>tag):

/* 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%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

Un'opzione che puoi usare è che object-fit: coversi comporta un po 'come background-size: cover. Altro su adattamento agli oggetti .

ignora tutti i JS qui sotto, è solo per la demo.

La chiave qui è che devi impostare l'immagine all'interno di un wrapper e dargli le seguenti proprietà.

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Di seguito ho creato una demo in cui si modifica l'altezza / larghezza del wrapper e si vede in gioco. L'immagine sarà sempre centrata verticalmente e orizzontalmente. Occuperà il 100% della larghezza e dell'altezza del genitore e non verrà allungato / schiacciato. Ciò significa che vengono mantenute le proporzioni dell'immagine. Le modifiche vengono applicate ingrandendo / rimpicciolendo invece.

L'unico aspetto negativo object-fitè che non funziona su IE11.

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>