As shown in the figure, realize an adaptive picture list, with 3 images per line for a screen smaller than 1366, 4 images per line for a screen larger than 1366 and less than 1700, and 5 images per line for a screen larger than 1700. As the screen changes the image is scaled in equal proportions (4:3).

1. Css3@media query

Different screen sizes show different numbers of images per line. First came the @media query.

Using @media queries, you can define different styles for different media types. @Media can be set to different styles for different screen sizes, especially if you need to set up responsive pages. When you resize the browser, the page will also be rerendered according to the width and height of the browser.

@media screen and (max-width:1366px){
// The screen size is smaller than 1366.
} 
@media screen and (min-width: 1366px) and (max-width: 1700px){
// The screen size is greater than 1366 but less than 1700
}
@media screen and (min-width:1700px){
// The screen is larger than 1700
}
Copy the code

2. Each picture block is displayed in proportion to different screen widths.

Determination of width:
// The width of each block should be 1/3 of the width of the screen, minus the padding
.image-wrapper{ width: calc(100% / 3 - 20px) } 
// Screen width > 1366 > 1700 4 blocks per row, each block width is 1/4 of the screen width, minus the padding
.image-wrapper{ width: calc(100% / 4 - 20px) } 
// The screen is larger than 1700. Each block is 1/5 of the screen width, minus the padding
.image-wrapper{ width: calc(100% / 5 - 20px) }
Copy the code
Determination of height:

Width and height should be shown in proportion. How do I set the height by width?

The padding % is a padding based on the percentage of the width of the parent element. We set the padding-top of the element as its height. The width and height of the ratio can be obtained indirectly.

// The width of each block should be 1/3 of the width of the screen, minus the padding
.image-wrapper{ 
    width: calc(100% / 3 - 20px)
    padding-top: 100% / 3 / 4 * 3
}
// Screen width > 1366 > 1700 4 blocks per row, each block width is 1/4 of the screen width, minus the padding
.image-wrapper{
    width: calc(100% / 4 - 20px) 
    padding-top: 100% / 4 / 4 * 3
} 
// The screen is larger than 1700. Each block is 1/5 of the screen width, minus the padding
.image-wrapper{
    width: calc(100% / 5 - 20px)
    padding-top: 100% / 5 / 4 * 3 
}
Copy the code
Copy the code

3. Set the image width and height

Since the actual height of the image’s parent element. Image-wrapper is 0, it is filled with paddingTop. So you can’t put pictures in. Absolute relative positioning needs to be set. Also make the image full vertically and horizontally centered.

.image-wrapper{ 
    position: relative;
    img{ 
        positon: absolute
        height: 100%
        top: 0
        bottom: 0
        left: 0
         right: 0
         margin: auto
     }
 }
Copy the code

Finished! See the full example

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> </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>Copy the code