如图，实现一个自适应图片列表，屏幕小于1366放每行3个，屏幕大于1366小于1700每行放四个，屏幕大于1700每行放五个。随着屏幕的变化图片按等比缩放（4:3）。
1. css3 @media查询
不同屏幕大小每行展示图片个数不一样。首先想到了@media查询。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media screen and (max-width:1366px){
//屏幕小于1366放每行3个，
}
@media screen and (min-width: 1366px) and (max-width: 1700px){
//屏幕大于1366小于1700每行放四个
}
@media screen and (min-width:1700px){
//屏幕大于1700每行放五个
}
2. 每一个图片块根据不同的屏幕宽度等比例展示，
宽度的确定：
//屏幕小于1366放每行3个，每个块的宽度为屏幕宽度的三分之一，再减去padding
.image-wrapper{ width: calc(100% / 3 - 20px) }
//屏幕大于1366小于1700每行放四个,每个块的宽度为屏幕宽度的四分之一，再减去padding
.image-wrapper{ width: calc(100% / 4 - 20px) }
//屏幕大于1700每行五个,每个块的宽度为屏幕宽度的五分之一，再减去padding
.image-wrapper{ width: calc(100% / 5 - 20px) }
高度的确定：
宽度和高度要等比例展示。如何根据宽度设置高度值呢？
通过查资料发现，padding的%值，是基于父元素的宽度的百分比的填充。我们通过设置元素的padding-top作为元素的高度。可以间接得出等比的宽高。
//屏幕小于1366放每行3个，每个块的宽度为屏幕宽度的三分之一，再减去padding
.image-wrapper{
width: calc(100% / 3 - 20px)
padding-top: 100% / 3 / 4 * 3
}
//屏幕大于1366小于1700每行放四个,每个块的宽度为屏幕宽度的四分之一，再减去padding
.image-wrapper{
width: calc(100% / 4 - 20px)
padding-top: 100% / 4 / 4 * 3
}
//屏幕大于1700每行五个,每个块的宽度为屏幕宽度的五分之一，再减去padding
.image-wrapper{
width: calc(100% / 5 - 20px)
padding-top: 100% / 5 / 4 * 3
}
3. 设置图片宽高
由于图片的父元素.image-wrapper的实际高度为0，是有paddingtop填充的高度。因此图片是放不进入的。需要设置absolute相对定位。并且使图片垂直铺满，水平居中。
.image-wrapper{
position: relative;
img{
positon: absolute
height: 100%
top: 0
bottom: 0
left: 0
right: 0
margin: auto
}
}
完毕！请看完整例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body{
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
@media screen and (max-width:600px){
.image-wrapper{
background-color: aqua;
width: calc(100% / 3 - 20px);
padding-top: 25%;
position: relative;
}
}
@media screen and (min-width: 600px) and (max-width: 700px){
.image-wrapper{
background-color: aqua;
width: calc(100% / 4 - 20px);
padding-top: 18.75%;
position: relative;
}
}
@media screen and (min-width:700px){
.image-wrapper{
background-color: aqua;
width: calc(100% / 5 - 20px);
padding-top: 15%;
position: relative;
}
}
.image-wrapper{
margin-bottom: 20px;
margin: 20px 10px;
}
img{
position: absolute;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class='image-wrapper'>
<img src='https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg'>
</div>
<div class='image-wrapper'>
<img src="https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg">
</div>
<div class='image-wrapper'>
<img src="https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg">
</div>
<div class='image-wrapper'>
<img src="https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg">
</div>
<div class='image-wrapper'>
<img src="https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg">
</div>
<div class='image-wrapper'>
<img src="https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg">
</div>
<div class='image-wrapper'>
<img src="https://images.pexels.com/photos/4587991/pexels-photo-4587991.jpeg?cs=srgb&dl=pexels-anna-shvets-4587991.jpg&fm=jpg">
</div>
</body>
</html>
