css3 缩略图 图片列表

CSS3缩略图和图片列表是网页设计中经常用到的两个函数，它们可以帮助我们快速构建一个美观的图片展示页面。下面是关于它们的详细介绍和代码示例。

CSS3缩略图

CSS3缩略图可以将图片等比例缩小，方便我们在页面中展示多张图片，同时也减小了图片渲染对页面性能的影响。我们使用CSS3的transform属性来变换图片的大小，同时搭配CSS3的transition属性来实现动画效果。

.thumbnail {
  width: 200px;
  height: auto;
  overflow: hidden; 
  position: relative;
}

.thumbnail img {
  display: block;
  transition: all 0.3s ease;
}

.thumbnail:hover img {
  transform: scale(1.5);
}

这里我们给图片的容器设置了宽度和溢出隐藏，这样图片在缩放后不会超出原来的范围。我们给图片增加了过渡效果，当鼠标悬停在图片上时，使用transform属性将图片放大1.5倍，同时使用缩放动画效果来呈现过渡的效果。

图片列表

图片列表可以展示多张图片，同时给用户快速预览和选择图片的功能。我们可以通过CSS3的flex布局来构建图片列表，通过设置图片的宽度和高度来控制图片的大小和布局。

.img-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.img-list img {
  width: 150px;
  height: auto;
  margin: 10px;
}

这里我们给图片列表的容器设置了flex布局，并通过flex-wrap属性来控制图片的换行方式。同时我们通过设置图片的margin属性来调整图片之间的间距。需注意，为了让图片能够自适应宽度，我们设置了图片的宽为150px，并将高度设置为auto。这样图片在宽度超过150px时会自动调整高度，保证图片比例不变。

以上就是CSS3缩略图和图片列表的实现方法，希望能够帮助大家更好地构建图片展示页面。