使用CSS3 object-fit 属性制作自适应画廊特效

查看演示 下载地址

在目前的网页设计中，制作图片画廊一般需要两种图片，一张缩略图和一张原图。这样服务器在加载图片的时候就需要请求两次。这是现在通用的做法，有其优点，也有缺点。在这篇文章中，我们想只使用一张图片来完成图片画廊，解决的方案是使用CSS3的object-fit属性。这个方法的唯一缺点是在不支持object-fit属性的浏览器中(旧版本的Firefox和IE浏览器)，缩略图的显示会出现偏差。

不管如何，我们来看看这个技术是如何实现的。下面是基本的HTML代码：

<div id="o-gallery">
    <figure>
    <img src="backless.jpg" alt>
    <figcaption>Photograph of a woman in a backless dress</figcaption>
    </figure>
    …
</div>                     
                            

在CSS代码中，使用flexbox来排列图片：

div#o-gallery {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
}
div#o-gallery figure {
    flex: 1;
    max-width: 500px;
    transition: 1s;
    margin: 0;
}                   
                            

每一张图片都设置相同的宽度：

div#o-gallery img {
    width: 200px;
    max-height: 200px;
    border: 1px solid;
    object-fit: cover;
    object-position: 0% 0%;
    transition: 1s;
    font-size: 0;
    line-height: 0;
}                              
                            

object-position

在图片上使用object-fit: cover属性后，图片的位置原点位于图片的中心。改变它们的原点是和background-image属性相同的，我们要将原点移动到左上角，使用object-position属性：

div#o-gallery img { object-position: 0% 0%; }                                
                            

当鼠标滑过每一个<figure>元素的时候，它的宽度变为其它兄弟节点的两倍，在<figure>元素中的图片将扩展其宽度为100%，高度自适应，并设置最大高度。但要注意这时不要在图片上使用object-fit属性。

div#o-gallery figure:hover {
    flex: 2;
}
div#o-gallery figure:hover img {
    width: 100%;
    max-height: 700px;
    object-fit: none;
}                                
                            

注意：Safari浏览器不支持object-position属性。

到这里，这个图片画廊效果就做好了。虽然由于浏览器的原因，该效果不能做到跨浏览器应用，但是我们可以从中学习到很多东西。另外，在demo中还为每幅图片都添加了图片标题效果。在后面的文章中，我们会详细介绍CSS3 object-fit属性。

查看演示 下载地址