Verticalmente e orizzontalmente Centra l'immagine all'interno di una Div, se non conosci le dimensioni dell'immagine?

Question

Se si dispone di un div contenitore di dimensioni fisse e di un'immagine di dimensioni sconosciute, come si centra orizzontalmente e verticalmente?

• con puro css
• utilizzando JQuery se css non può farlo

This answer makes sense per larghezza immagini fisse, ma non quelli variabili.

Qualcosa di simile struttura (ho in mente item renderers similar to these in the list, ma dove l'immagine a sinistra non sarebbe sempre la stessa dimensione:

<ul id="gallery"> 
    <li id="galleryItem1"> 
     <div class="imageContainer"> 
      <img src="gallery/image1"/> 
     </div> 
     <p>Some text to the right...</p> 
     <!-- more stuff --> 
    </li> 
    <li id="galleryItem2"> 
    <!-- ... --> 
</ul> 

Grazie per l'aiuto

Answer 1

Si potrebbe usare! background-position per questo.

#your_div { 
    background-position: center center; 
    background-image: url('your_image.png'); 
} 

Answer 2

Se impostando l'immagine come immagine di sfondo e la centratura in questo modo non è un'opzione, il jQuery per adattarsi 012.333.sarebbe andato:

$(".fixed-div img.variable").each(function(){ 
    //get height and width (unitless) and divide by 2 
    var hWide = ($(this).width())/2; //half the image's width 
    var hTall = ($(this).height())/2; //half the image's height, etc. 

    // attach negative and pixel for CSS rule 
    hWide = '-' + hWide + 'px'; 
    hTall = '-' + hTall + 'px'; 

    $(this).addClass("js-fix").css({ 
    "margin-left" : hWide, 
    "margin-top" : hTall 
    }); 
}); 

assumendo una classe CSS definito come

.variable.js-fix { 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

con il div a larghezza fissa con altezza e position:relative dichiarato.

[modifica importante js: commutata '.style()' a 'css()']

Answer 3

Utilizzando visualizzazione: trick table-cell per div

di funzionare correttamente in: Firefox, Safari, Opera , Chrome, IE8

esempio CSS: esempio

div { 
    width: 300px; 
    height: 300px; 
    border: 1px solid black; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 
img { 
    display: inline; 
} 

HTML:

<div> 
    <span></span> 
    <img src="" alt="" /> 
</div> 

Firefox example

Answer 4

soluzione crossbrowser

<style> 
    .border {border: 1px solid black;} 
</style> 
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;"> 
    <div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;"> 
    <div class="border" style="width: 400px; #position: relative; #top: -50%"> 
     <img src="smurf.jpg" alt="" /> 
    </div> 
</div> 

Original solution for vertical div positioning

Answer 5

È inoltre possibile allineare in questo modo. Almeno questo è come l'ho fatto e ha funzionato per me. Potrebbe non essere il modo migliore per farlo. Ho avuto un sacco di loghi di dimensioni diverse all'interno di div di dimensione fissa.

Prima ottenere le dimensioni dell'immagine. Quindi, in base all'altezza del tuo div, puoi capire quale dovrebbe essere il margine superiore. Questo lo centrerà verticalmente. Basta cambiare i valori $ IMG_URL e $ DIVHEIGHT.

list($width, $height, $type, $attr) = getimagesize($IMG_URL); 
$margin-top = number_format(($DIVHEIGHT - $height)/2, 0); 

Ad esempio.

<div style="margin-top:".$margin-top."px\"><img src="" /> </div> 

Answer 6

Uso height: 100% per il tag html, tag body, contenitore e un elemento segnaposto vuoto in più display: inline-block; e vertical-align: middle per il contenuto e segnaposto per centrare verticalmente il contenuto che ha un'altezza indefinita tra i browser. L'elemento segnaposto viene dato al 100% in altezza per sostenere la casella di riga, in modo che l'allineamento verticale: il centro abbia l'effetto desiderato. Usa un contenitore a larghezza fissa per avvolgere le immagini.

Usa display: in linea per il contenuto div e centro allineamento del testo al div contenitore per fare il centraggio orizzontale per il contenuto che ha una larghezza indefinita tra i browser.

combinare entrambe le tecniche per creare una galleria di immagini centrato:

<!doctype html> 
<html> 
<head> 
<title>Centered Image Gallery</title> 
<style type="text/css"> 
html, body, .container, .placeholder { height: 100%;} 

img { margin-left: 20px; margin-top: 10px; } 

.container { text-align:center; } 

/* Use width of less than 100% for Firefox and Webkit */ 
.wrapper { width: 50%; } 

.placeholder, .wrapper, .content { vertical-align: middle; } 

/* Use inline-block for wrapper and placeholder */ 
.placeholder, .wrapper { display: inline-block; } 

.fixed { width: 900px; } 

.content { display:inline; } 

@media, 
{ 
.wrapper { display:inline; } 
} 
</style> 

</head> 
    <body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div class="fixed"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
     </div> 
     </div> 
    </div> 
    <span class="placeholder"></span> 
</div> 

</body> 
</html> 

Answer 7

Questa è una variante di PHP.

È un sacco di codice ma funziona come un fascino. L'ho inventato dopo aver letto diversi post su questo argomento. Posiziona le immagini di varie dimensioni in een fissa larghezza e l'altezza div

È CSS deve contenere questo:

.friend_photo_cropped{ 
    overflow: hidden; 
    height: 75px; 
    width: 75px; 
    position:relative; 
} 
.friend_photo_cropped img{ 
    position:relative; 
} 

Il codice dovrebbe essere questo:

<?php 
list($width, $height) = getimagesize($yourImage); 
if ($width>=$height) 
{ 
     $h = '75'; 
     $w = round((75/$height)*$width); 
} 
else 
{ 
     $w = '75'; 
     $h = round((75/$width)*$height); 
} 
$top = -round(($h-75)/2); 
$left = -round(($w-75)/2); 
echo '<td height="75">'; 
echo '<div class="friend_photo_cropped">'; 
     echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">'; 
echo '</div>'; 
echo '</td>'; 
?> 

Answer 8

Partenza mia soluzione: http://codepen.io/petethepig/pen/dvFsA

È scritto in puro CSS, senza alcun codice JS. Può gestire immagini di qualsiasi dimensione e qualsiasi orientamento.

aggiungere un altro div al codice HTML: Codice

<div class="imageContainer"> 
    <img src="gallery/image1"/> 
</div> 

CSS:

.imageContainer { 
    font-size: 0; 
    text-align: center; 
    width: 200px; /* Container's dimensions */ 
    height: 150px; 
} 
img { 
    display: inline-block; 
    vertical-align: middle; 
    max-height: 100%; 
    max-width: 100%; 
} 
.imageContainer:before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    height: 150px; 
} 

Aggiornamento: mi sono liberato di questo elemento <div class="trick"></div> a favore del selettore :before CSS

Answer 9

Ho usato

.on('load', function() { 

invece

.each(function(){ 

utilizzato in this answer essa aiuta ad eliminare il problema con i valori vuoti di altezza e larghezza quando l'immagine non è ancora stato caricato

<style type="text/css"> 
.fixed-div { 
    position: relative; 
} 

.variable { 
    width: 100%; 
    height: auto; 
} 

.variable.js-fix { 
    position:absolute; 
    top:50%; 
    left:50%; 
} 
</style> 

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    $(".fixed-div img.variable").on('load', function() { 
     //get height and width (unitless) and divide by 2 
     var hWide = ($(this).width())/2; //half the image's width 
     var hTall = ($(this).height())/2; //half the image's height, etc. 
     console.log("width", $(this).width()); 
     console.log("height", $(this).height()); 

     // attach negative and pixel for CSS rule 
     hWide = '-' + hWide + 'px'; 
     hTall = '-' + hTall + 'px'; 

     $(this).addClass("js-fix").css({ 
      "margin-left" : hWide, 
      "margin-top" : hTall 
     }); 
    }); 
}); 
</script> 

<div class="fixed-div"> 
    <img class="variable" src=""/> 
</div> 

Answer 10

immagine Centro orizzontalmente e verticalmente

DEMO:

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/

---

.section { 
      background: black; 
      color: white; 
      border-radius: 1em; 
      padding: 1em; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-right: -50%; 
      transform: translate(-50%, -50%) 
     } 

Answer 11

Con CSS3 FlexBox, non avrete più bisogno hack per centrare l'immagine. Attualmente è supportato da tutti i browser moderni. Scopri Can I use flexbox?

.container { 
 
    display: flex; /* Flexible layout container */ 
 
    justify-content: center; /* Horizontal center alignment */ 
 
    align-items: center; /* Vertical center alignment */ 
 
    background: lightblue; 
 
    /* Fixed size container */ 
 
    height: 300px; 
 
    width: 300px; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/150x150"> 
 
</div>

Answer 12

Se non conoscere le dimensioni delle immagini, ma aver caricato le immagini accanto alle dimensioni del contenitore (forse le immagini più grandi o più piccoli), questo post può essere utile. Qualcosa che sta lavorando per me è il codice successivo:

<a class="linkPic" href="#"> 
    <img src="images/img1.jpg" alt=""/> 
</a> 
<a class="linkPic" href="#"> 
    <img src="images/img2.jpg" alt=""/> 
</a> 
<a class="linkPic" href="#"> 
    <img src="images/img3.jpg" alt=""/> 
</a> 

E nel file css si hanno le seguenti regole:

a.linkPic{ 
    position:relative; 
    display: block; 
    width: 200px; height:180px; overflow:hidden; 
} 
a.linkPic img{ 
    position:absolute; 
} 

Si può notare si dispone di un tag immagine all'interno del a.linkPic , quindi per prima cosa devi impostarlo come "posizione: relativo" per contenere l'elemento "img" assoluto. Il trucco per centrare l'immagine senza problemi è un piccolo codice jQuery. Seguire i commenti per capire cosa sta succedendo (alcune linee sono state prese dalla carica Vladimir Maryasov in questa pagina):

$("a.linkPic img").each(function() { 
    // Get container size 
    var wrapW = $("a.linkPic").width(); 
    var wrapH = $("a.linkPic").height(); 

    // Get image sizes 
    var imgW = $(this).width(); 
    var imgH = $(this).height(); 

    // Compare if image is bigger than container 
    // If image is bigger, we have to adjust positions 
    // and if dont, we have to center it inside the container 
    if (imgW > wrapW && imgH > wrapH) 
    { 
     // Centrar por medio de cálculos 
     var moveX = (imgW - wrapW)/2; 
     var moveY = (imgH - wrapH)/2; 

     // attach negative and pixel for CSS rule 
     var hWide = '-' + moveX + 'px'; 
     var hTall = '-' + moveY + 'px'; 

     $(this).addClass("imgCenterInDiv").css({ 
      "margin-left" : hWide, 
      "margin-top" : hTall 
     }); 
    } else { 
     $(this).addClass("imgCenterInDiv").css({ 
      "left" : 0, 
      "right" : 0, 
      "top" : 0, 
      "bottom" : 0, 
      "margin" : "auto", 
     }); 
    }//if 
}); 

Dopo di ciò, tutte le foto all'interno di contenitori a.linkPic sarà posizionato perfettamente centrato . Spero che questo post possa essere utile per qualcuno!