CSS3图片自适应

发表于 | 分类于 | 阅读次数:

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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>