将图像对齐在中心

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

更新1

图像列表如下。被照片的图片与其他图片相比具有更大的宽度。它们是歪曲的。我想要居中的图片，能够看到图片的中间而不是左侧。

更新2

缩略图必须具有160px宽度和240px高度，无论图片的实际尺寸如何。一些照片在调整大小后完全适合。其他因为宽度大于高度不合适。这就是为什么我裁剪它们，它们必须居中以便制造。能够看到一张脸而不是一个人的肩膀。图片是在我的网页上动态添加的。

更新3

960×640

640x960的

Answer 1

没有看到图像真的很难，但一般来说你可以做的是：

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。如果您希望所有图像都居中，那么您不需要添加该类。

---

如果您需要更具体的答案，请提供您的图片宽度/八。

Answer 2

结合@GionaF和以下脚本的答案，我得到了理想的结果。

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