對齊圖像中心

Question

我有一個圖像列表，其中一些圖像的寬度較大，我喜歡這樣剪裁它們，我設置overflow:hidden以隱藏不必要的部分並避免縮放。圖像，但沒有爲我工作。我知道這是受歡迎的問題，但沒有任何答案幫助我。我想我犯了一個錯誤。能夠比我更有經驗的人幫助嗎？

還添加了一些過渡效果。

<div id="second" class="single"> 
    <ul> 
     <li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li> 
     <li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img src="images/album/8.jpg" alt=""/></a></li> 
     <li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li> 
     <li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li> 
     <li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li> 
     <li><a href="images/album/12.jpg" rel="lightbox[photos]"><img src="images/album/12.jpg" alt=""/></a></li> 
    </ul> 
    </div> 

CSS代碼

.single ul { 
    list-style-type: none; 
} 

.single li { 
    padding: 0px; 
    width: 160px; 
    height: 240px; 
    margin: 10px; 
    overflow: hidden; 
    float: left; 

    -webkit-transition: box-shadow 0.5s ease; 
    -moz-transition: box-shadow 0.5s ease; 
    -o-transition: box-shadow 0.5s ease; 
    -ms-transition: box-shadow 0.5s ease; 
    transition: box-shadow 0.5s ease; 
} 

.single img { 
    height: 240px; 

} 

.single li:hover { 
    -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 
    box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 
} 

UPDATE 1

的圖像的列表被其cyrcled具有較大的寬度相比others.They below.The畫面croped那些我想要居中的圖片，能夠看到圖片中間的不是左側。

更新2

縮略圖必須有160像素的寬度和高度240像素，無論什麼樣的圖片實際大小are.Some照片適應調整後，他們準確。其他因爲寬度大於高度不適合。這就是爲什麼我裁剪他們，他們必須集中，以便使感覺。爲了能夠看到人臉而不是人的肩膀，圖片在我的網頁中動態添加。

更新3

的960x640

640×960

Answer 1

結合@GionaF和下面的腳本的答案我有理想的結果。

$(document).ready(function() { 
    $(".single img").load(function() { 
     if($(this).width() > 160) { 
       $(this).addClass('centered'); 
      } 
     }); 
    }); 

Answer 2

這是真的辛苦沒有看到的圖像，但總體來講，你可以做的是：

1）添加一個類需要居中的圖像，有很多創造性的，我們把它叫做「居中」

<div id="second" class="single"> 
<ul> 
<li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li> 
<li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img class="centered" src="images/album/8.jpg" alt=""/></a></li> 
<li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li> 
<li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li> 
<li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li> 
<li><a href="images/album/12.jpg" rel="lightbox[photos]"><img class="centered" src="images/album/12.jpg" alt=""/></a></li> 
</ul> 
</div> 

2）添加一個等於溢出寬度的一半的負左邊距

例如，假設您的第二張圖像寬度爲200px。

.single li是160px，所以我們有40px飛越。你可以把這個類：

.single img.centered { 
    margin-left:-20px; /* half of the overflown width */ 
} 

，它會在中心被裁剪。 「Demo」。

P.S.如果你想所有的圖像居中，obv你不需要添加類。

---

如果您需要更具體的答案，請提供您的圖像的寬度/八。