怎么用css设置照片墙

照片墙是一个很好看的页面元素，那么怎么用CSS设置照片墙呢？下面就为大家详细讲解：

/*照片墙的样式*/.photo-wall{
    display: flex;
    flex-wrap: wrap;
}
.photo-img{
    width: 150px;
    height: 150px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    overflow: hidden;
}
.photo-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.photo-img:hover img{
    transform: scale(1.1);
}
    

首先，我们需要创建一个类为photo-wall的div元素，这个div元素要使用Flexbox布局，并使用flex-wrap属性让其内部的图片元素自动换行排列。

接下来，我们创建一个类为photo-img的div元素，它的宽高都设置为150px，并设置一个10px的外边距，让照片之间有适当的间隔。而且还设置了圆角和阴影，让图片看起来更加美观。

我们在photo-img中嵌套一张img元素，宽高设置为100%并设置object-fit: cover，让图片自适应填充父容器，并保持比例不变。

为了让图片更加活泼，我们添加了hover效果，当鼠标滑过图片时，图片进行缩放并从1.0到1.1逐渐变大，增添了页面的动态感。

这就是用CSS设置照片墙的完整方法，通过简单的设置，我们可以轻松实现一个美观的照片墙。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！