图片响应式布局

 

图片响应式布局：

<style>
img{
float:left;
margin: 10px;
width: calc(100%*1/4 - 20px);
}

@media(max-width:800px){
img{
width: calc(100%*1/3 - 20px);
}
}

@media(max-width:600px){
img{
width: calc(100%*1/2 - 20px);
}
}

@media(max-width:400px){
img{
width: calc(100%* - 20px);
}
}

</style>