Centrare un'immagine in un div troppo piccolo per questo?

Question

Così ho un div nel mio corpo che è una larghezza percentuale, e al suo interno che un div con stile in linea come segue:

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

Come potete vedere, ho text-align: center; su, che, se l'immagine era abbastanza piccolo per il div, centrare l'immagine. Ma la div larghezza percentuale è sicuramente non sarà abbastanza grande sul mio schermo 1280x800.

I margini negativi sono da superare alcuni imbottitura è div genitore. Il overflow:hidden fa sembrare le cose come voglio, non disordinato. Quindi, è una specie di lavorare come voglio che, come l'immagine di intestazione a onenaught.com . Diventerà più visibile sulla destra come si effettua il browser più ampia, ma non espandere da entrambi i lati, perché non è centrato.

Quindi, mi chiedo se c'è un modo per centrare l'immagine. Sa di qualsiasi?

Modifica: qui .

Answer 1

Una possibilità sarebbe quella di posizionare assolutamente l'immagine con left: 50% e quindi utilizzare un negativo margine sinistro sull'immagine pari alla metà della larghezza dell'immagine. Naturalmente, questo richiede l'div contenente avere il suo posizionamento impostato relativo o assoluto per fornire il tipo di contenitore appropriato per l'immagine da assolutamente posizionato all'interno.

L'altra opzione (e probabilmente meglio) è invece di utilizzare un tag di immagine, è sufficiente impostare l'immagine come sfondo per il div genitore, e utilizzare il sfondo posizionamento CSS attributi per centrarla. Questo non solo assicurarsi che sia centrato senza forzare posizionamento assoluto, ma anche automaticamente ritagliare troppopieno, quindi l'attributo di overflow non è necessaria.

Answer 2

Si può effettivamente fare questo impostando il margin-left e margin-right sull'immagine per -100%.

Ecco un jsFiddle dimostrare questo. (utilizzare quella qui sotto, invece, è meglio)

È un'idea ancora migliore per impostare il margin-left e margin-right sull'immagine per un numero negativo molto più grande, ad esempio -9999%, come con il valore -100%, l'immagine inizia a muoversi fuori centro non appena elemento contenitore del div diventa meno largo 3 volte la larghezza del div:

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

È possibile controllare la differenza di comportamento tra questo jsFiddle e quello precedente portando l'overflow visibile e ridimensionando la finestra risultato a meno 300% della larghezza del div.

Citando @MaxOriola sulla gamma dei browser supportati (dai commenti):

  

Ho riprovato secondo violino ... in Firefox, Chrome, Safari (ultime versioni) e Explorer 8, 9, 10. funziona bene in tutti loro.

Nota: elemento immagine deve essere visualizzato o inline inline-block e centrato orizzontalmente con text-align: center (sull'elemento involucro)

.

// 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://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

Answer 3

Utilizzando css transform, un'immagine all'interno di un contenitore con overflow: hidden e una larghezza serie:

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

jsFiddle qui (ho preso in prestito parte del jsFiddle di Mathijs Flietstra, quindi grazie).

Answer 4

è consigliabile utilizzare l'immagine come sfondo;)

utilizzo background-position per ottenere ciò che si desidera.

potrebbe essere bisogno di una soluzione di javascript per ottenere risultati costanti cross-browser

Answer 5

Ho trovato un'altra soluzione

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

e nel corpo

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

In questo modo centrare l'immagine ogni volta che il contenitore è più grande o più piccolo. In questo caso, l'immagine deve essere più grande di 300% dei container di non essere centrato, ma in questo caso si può fare con dei containerSecond più grande, e funzionerà