Question

这可能非常简单，但我似乎无法弄明白。我正在图像库中工作，图像有时在肖像中，有时在横向模式下。为了使图库看起来一致，我需要缩略图大小相同，只需点击一下，就会显示完整的图像。我正在使用Zurb Foundation和SCSS。这是我目前的代码：

<div class="img-single column column-block">
   <a data-open="galleryModal">
   <img src="assets/img-01.jpg" class="thumbnail" alt="">
   </a>
</div>

.img-single {
    width: 300px;
    height: 300px;

    img {
        width: 100%;
        height: 100%;
    }
}

目前，图像延伸为300px×300px。我只需要显示图像的缩略图，并显示图像的中心，而不是扭曲。我还尝试添加vertical-align: middle;并使用max-width和max-height值，但它没有做任何事情。怎么办呢？

Answer 1

您可以使用background-image上的div将图片置于较小的容器中。

<div class="thumbnail" style="background: url("assets/img-01.jpg") no-repeat;"></div>

.thumbnail {
  background-position: center;
  width: 50px;
  height: 50px;
}

Answer 2

您可以利用新的object-fit CSS属性，并根据需要显示图片。

以下是一些示例代码，显示使用object-fit放置的图像与默认图像之间的差异：

＆＃13;

.img-single {
  display: inline-block;
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.img-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

＆＃13;

<div class="img-single column column-block">
  <a data-open="galleryModal">
    <img src="https://unsplash.it/458/354?image=0" class="thumbnail" alt="Image with object-fit">
  </a>
</div>

<img src="https://unsplash.it/458/354?image=0" alt="Just the image">

＆＃13;

如果您愿意，也可以在img-single object-position内以不同的方式定位图片。

希望它有所帮助。

PS：我还使用了overflow属性来阻止图像流血。感谢。

Answer 3

如果删除Foundation的thumbnail课程，这应该可以。

HTML（例如）

<div class="img-grid row small-up-2 medium-up-3 large-up-4">
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/620/580/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/440/780/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/460/640/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/720/420/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/660/400/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/480/840/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/400/640/animals" class="" alt="">
       </a>
    </div>
    <div class="img-single column column-block">
       <a data-open="galleryModal">
       <img src="https://placeimg.com/440/780/animals" class="" alt="">
       </a>
    </div>
</div>

<强> SCSS

.img-single {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      min-width: 300px;
      min-height: 300px;
    }
}

JSFiddle demo

如何在缩略图中显示图像的中心

3 个答案: