如何使区块保持比例自动缩放

SJY发表于:2016年12月28日 14:22 • 阅读:

1. 对于img元素而言,使用auto height:

img{  
min-width: 100%;  
height: auto;  
}  

2.不过对于DIV块元素,这样做没用,块大小总是按照内容或内含元素来匹配。

解决方案是使用padding-top/padding-bottom 100%的空元素,如下所示:

.box{  
    position: relative;  
    width: 50%;  
}  
.box:before{  
    content: "";  
    display: block;  
    padding-top: 100%;  
}  

或者

.box:before{  
    content: "";  
    height: 0;  
    padding-bottom: 100%;  
}  

在放置内容在这个box上的时候,使用绝对位置:

.content{  
    position:  absolute;  
    top: 0;  
    left: 0;  
    bottom: 0;  
    right: 0;  
}   

通过调节padding-bottom比例来调整横宽比例。比如padding-top:75%,就是4:3的比例。

3.使用vm/vh,不过这个依赖于浏览器是否提供了支持,一般现代桌面浏览器以及iPhone/Samsung这些高端手机都支持,但是普通手机浏览器很多都不支持。

?.box {width: 25%; height: 100%vw}  

欢迎转载,但请保留原文地址 http://www.sjyhome.com/css/1175.html

回复(0)