当前位置主页 > 资料库 > 前端教程 > 使用CSS3 object-fit 属性制作自适应画廊特效

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

03-03

查看演示 下载地址

在目前的网页设计中,制作图片画廊一般需要两种图片,一张缩略图和一张原图。这样服务器在加载图片的时候就需要请求两次。这是现在通用的做法,有其优点,也有缺点。在这篇文章中,我们想只使用一张图片来完成图片画廊,解决的方案是使用CSS3object-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属性。

查看演示 下载地址

Previous:
上一篇:纯CSS鼠标从不同方向滑入图片产生不同的图片标题效果
Next:
下一篇:使用HTML5和CSS3打造炫酷带缩略图的图片画廊
返回顶部