CSS implementation nine Gongge image adaptive layout

Before I write nine Gongge adaptive layout, each grid is using Media Finder (@media) or JS dynamic set CSS, according to different phone screen width, suitable for different mobile phones, but this has a great disadvantage, that is mobile screen size too much, you have to write a lot of code, To achieve the effect we want.

Today's whim, the use of pure CSS to achieve the effect I want, below and everyone to share, on the code;

<!        DOCTYPE html>
It includes the simple initialization of CSS, after removal, the actual implementation of the code does not have a few lines.
If we put a picture, then we will change the span tag to an IMG tag, and the CSS will add width:100%;height:100% to IMG;
CSS implementation nine Gongge image adaptive layout