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

【问题标题】：How to display the center of an image in a thumbnail如何在缩略图中显示图像的中心
【发布时间】：2017-08-06 05:38:12
【问题描述】：

这可能是非常简单的事情，但我似乎无法弄清楚。我正在制作一个图片库，其中的图片有时是纵向的，有时是横向的。为了使画廊看起来统一，我需要缩略图大小相同，并且只有在单击时才会显示完整图像。我正在使用 Zurb 基金会和 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%;
    }
}

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

【问题讨论】：

标签： html css zurb-foundation gallery thumbnails

【解决方案1】：

您可以利用新的object-fit CSS 属性，让图像显示为您想要的。

这里有一些示例代码，展示了使用object-fit 放置的图像与默认图像之间的区别：

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

<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">

如果您愿意，您也可以在 img-single 和 object-position 中以不同方式定位图像。

希望对您有所帮助。

PS：我还使用了overflow 属性来阻止图像溢出。谢谢。

【讨论】：

谢谢！我会调查对象位置并报告。
好的，慢慢来。

【解决方案2】：

您可以使用background-image 在div 上将图像居中在一个较小的容器中。

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

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

【讨论】：

但是我那里有很多图像，所以我需要创建多个类并为每个类使用背景图像，不是吗？当我的 html 中包含图像而不是 CSS 时，是否有办法做到这一点？
您可以做的是将相同的类应用于所有元素，并使用 HTML 中的 style 属性在元素本身中应用 background-image url。

【解决方案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

【讨论】：