1

我有一个图像列表，其中一些图像具有我喜欢的更大宽度，所以我裁剪它们，我设置它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

无论图片的实际尺寸是多少，缩略图都必须具有 160 像素的宽度和 240 像素的高度。有些照片在调整大小后完全适合。其他因为宽度大于高度不合适。这就是我裁剪它们的原因，它们必须居中才能有意义。能够看到人的脸而不是人的肩膀。图片在我的网页中动态添加。

更新 3

960x640

960x460

640x960

640x960

4

2 回答 2

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）添加一个负左边距等于溢出宽度的一半

例如，假设您的第二张图片是 200 像素宽。

.single li是 160px，所以我们有 40px 溢出。你可以申请这个类：

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

它会在中心被裁剪。“演示”。

PS如果您希望所有图像居中，则不需要添加类。

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

于 2012-10-06T17:02:54.110 回答
0

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

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

在此处输入图像描述

于 2012-10-06T18:45:23.067 回答