CSS控制图片img组件4:3等比缩放

CSS, HTML5, Web设计 / 作者： / / 发表评论 / CSS, HTML, img, 等比缩放

文章内容

1、HTML页面

1
2
3
<div class="pic">
    <img src=""/>
</div>

2、CSS样式

01
02
03
04
05
06
07
08
09
10
11
12
13
14
img {
        width: 100%;
        position:absolute;
        height:100%;
        left: 0;
        top:0;
}
.pic {
        position:relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%;
        background-color: #FFF;
}
打赏微海报分享

相关文章

发表评论

欢迎阅读『CSS控制图片img组件4:3等比缩放|CSS、HTML5、Web设计|Nick Tan-梓潼Blog』