Container width and height are unsure, uncertain picture width and height, how to implement css images responsive?

Pictures responsive

In responsive development should be the most disturbing pictures, although the picture setting max-width: 100%; width can make the picture fill the container, but the height can not be adaptive. If the container height limit dead, then we will use media queries to control the height of the container, so as to ensure the vessel width and height proportional. So how do the picture with the width of the container changes and change it? Like the following picture effect

There are four pictures in containers of different widths, the picture aspect ratio always remains the same

The principle

paddingTop or paddingBottom make pictures out of standard document flow, so that you can set the height of the image is 100%, and then set the parcel picture of the parent container, so that the picture in order to have a high degree and has maintained this ratio.

Sample Code

<style>
    *{margin: 0;padding: 0;box-sizing: border-box;}
    .container{
        max-width: 1200px;margin: 0 auto;
        padding: 20px 0;background-color: #ccc;
    }
    .clearfix:before,.clearfix:after{
        display: table;content: " ";clear: both;
    }
    .img-item{
        float: left;
        width: 20%;
        margin: 0 2.5% 20px 2.5%;
    }
    .img-wraper-out{
        position: relative;
        /*如果没有padding-bototm那么就没有高度*/
        padding-bottom: 56.5%;
    }
    .img-wraper-inner{
        /*将离元素最近的一个父元素设为绝对定位，这样它就脱离了标准文档流，并且它的高度随父容器的高度变化而变化，相当于
        高度为100%，它的高度为100%，那么图片就可以使用高度100%了*/
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
    }
    .img-wraper-inner img{
        display: block;
        vertical-align: middle;
        /*图片必须设置宽、高为100%*/
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
</style>

<div class="container clearfix">
    <div class="img-item">
        <div class="img-wraper-out">
            <div class="img-wraper-inner"><img src="https://car3.autoimg.cn/cardfs/product/g11/M10/AB/F2/1024x0_1_q87_autohomecar__wKjBzFnkfO6AQj3lAAoL51G2Vdg319.jpg" /></div>
        </div>
    </div>
    <div class="img-item">
        <div class="img-wraper-out">
            <div class="img-wraper-inner"><img src="http://c.hiphotos.baidu.com/baike/pic/item/29381f30e924b899534354dc64061d950b7bf6d3.jpg" /></div>
        </div>
    </div>
    <div class="img-item">
        <div class="img-wraper-out">
            <div class="img-wraper-inner"><img src="http://i1.hdslb.com/bfs/archive/3d043d2d910d47063745d78bec95a7d0d12efe01.jpg" /></div>
        </div>
    </div>
    <div class="img-item">
        <div class="img-wraper-out">
            <div class="img-wraper-inner"><img src="http://easyread.ph.126.net/rTS2v1NBn-Qkc02NTR3e4A==/7916711318894945866.jpg" /></div>
        </div>
    </div>
</div>