手机端列表页图片展示的问题

1.淘宝的方式

img的包裹div通过设定rem（通过对屏幕宽度的监听得到相对的值），再将宽高设定为rem的相对值，那宽高都有了统一的基准，宽高比例自然出来了！

div通过背景图的形式展现， background-size: contain;(也局限与是png只有实体的图片)

 box-sizing: border-box;
 line-height: 0;
 width: 2.406rem;
 height: 1.656rem;
 background-image:url("images/...png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;

2.齐家网的方式

img的包裹div通过设定padding-top百分比（不设置其他高度），div的padding的百分比的值，是相对于本身的宽度的值，这样同样实现了高度跟着宽度走的情况！

image-box img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}
img {
    width: 100%;
    height: auto;
    border: none;
}

父级设置position:relative;对上传的图片有要求，宽高比要同image-box的比例一样。如果其他比例，图片则会被自动拉伸或压缩。

3.我们的方式

用js控制，通过获取img的包裹div的宽度值，再将其高度设置为其宽度值的倍数。这样同样实现了高度跟着宽度走的情况！

缺点：ajax中需要手动添加这段函数，在原本display:none的大包裹下不会自动执行，在其变成display:block;的情况下，高度为0；

.image-box{
　　　　　　position: relative;
　　　　　　overflow: hidden; 
　　　　　　z-index: 2;}
.image-box img{
　　　　　　　　position:absolute;
　　　　　　　　top: 50%; 
　　　　　　　　left: 50%; 
　　　　　　　　top: 0 \9; 
　　　　　　　　left: 0 \9;
　　　　　　　　top: 50% \9 \0; 
　　　　　　　　left: 50% \9 \0; 
　　　　　　　　z-index: 1; 
　　　　　　　　-moz-transform: translate(-50%, -50%); 
　　　　　　　　-ms-transform: translate(-50%, -50%); 
　　　　　　　　-o-transform: translate(-50%, -50%); 
　　　　　　　　-webkit-transform: translate(-50%, -50%); 
　　　　　　　　transform: translate(-50%, -50%);
　　　　　　　　}

div中的Img最大宽度为100%；通过定位定义将img的左上角的点定位到div的中心(top: 50%;left: 50%;);再通过CSS3位移到自身的中心与div的中心重合，超出部分隐藏；

缺点：1.如果需要完美展示，对上传的图片有要求，宽高比要同image-box的比例一样。如果其他比例，宽高比例小的情况，会上下留白；宽高比例大的情况，上下被隐藏；

　　　2.在网页端，用CSS3的transform的translate属性调整时会冲突。（考虑结构div>p>img）