正如题目。在移动端布局的时候，这个很有用（不用js的情况下）。有这样一个场景：
有若干张图片，图片的宽高各不相同（如果图片宽高相同就好搞了哈），让这些图片显示在网页中。要求每行显示三张（照片横向，纵向有一定的间隔，且距离父容器的间隔为0），显示的高度等于宽度，并且让图片在容器中居中显示。另外，在图片上浮动显示照片的介绍以及类型等（浮动几个小span。这个是前边要求额外的。）。

下边，这些问题先一个一个的解决。

怎么实现一行显示三张图片呢。手机不通，分辨率等不同。你没法去固定一个宽度。所以，这里我们用百分比来计算。如果要让一行三个，先设置父容器的宽度为100%。自身容器的宽度为100% /3。 但是，又要求图片之间横纵向间隔一定像素。理想效果如下图所示：

好在，css中有calc这个方法。可以混合百分比，像素等来计算。于是，图片div的宽度就可以计算出来了(假设图片横向间隔为4像素)。

width: calc((100% - 8px)/3);

图片容器的宽度出来了，怎么让图片容器的高度等于宽度呢。这个用js，jquery很好实现。

$(document).ready(function(){
    $('.box1').css('height',$('.box1').css('width'));
})

但在这里，不想用js或jquery来实现。就像用css。起初，异想天开的以为用这个可以实现。

height: calc(width);

想法是美好的，现实是残酷的。这个方法不行。于是，有了以下两种方法（暂时实现过的）。

方法1：

    width: 40%;
    height: 0px;
    padding-bottom: 40%;

只要设置width为一固定百分比，height为0，padding-bottom和宽度的百分比一样。这样就可以实现一个div的宽高一样了。width，height，padding，这些很好理解，很好懂，就是不知道为什么这样写可以写出正方形来。如果想以平均分隔三张图片。可以这样写。

    .list{
        width: 100%;
        height: auto;
    }

    .list .item
    {
        position: relative;
        float:left;
        display: inline-block;
        width: calc((100% - 8px)/3);
        height: 0px;
        padding-bottom: calc((100% - 8px)/3);
        margin-left:4px;
        
        background: url(1.jpg) top center no-repeat; 
        background-size:cover;
        cursor: pointer;
    }
    
    .list .item:first-child
    {
        margin-left: 0px;
    }
    
    .list .item:last-child
    {
        margin-left: 0px;
    }

该样例中，必须最多三个item。

方法2：

    div{
        display:inline-block;
        width:20%;
    }

    div:before
    {
        content:"";
        display:inline-block;
        padding-bottom:100%;
    }

利用伪元素before也可以达到效果。
两种方法实现了div的宽高相等，之前实现了平均分隔。现在要实现的就是image的适应以及句中。image可以作为div的一个元素来显示，即background-image。给其设置background-size为cover，然后设置background-image属性为top center即可句中。最后内部元素布局，用div的绝对定位就可以实现。

再啰嗦一句。敲代码的时候，如果几个连在一起的div换行了，div之间会存在一定的空位，及时margin设置为0了也没有用。这个时候可以将这几个div连在一起不换行。或者给该div一个float属性。或者用js替换空格吧。