CSS3图片自适应

用div元素将img包裹住，采用padding-top属性可以使图片自适应缩放

<img src="/images/example.jpg" class="" />

<div class="pic">
    <img src="/images/example.jpg" />
</div>

<style>
/* 可以把以下写入到通用css中，随时引用 */
.pic{
    possition:relative;
    overflow:hidden;
    padding-top:50%;(即图片宽高比例为50%)
}
.pic img{
    position:absolute;
    top:50%;
    transform:translateY(-50%);(图片上下居中)
    width:50%;
}
</style>