css实现容器固定宽高比

基础：

        宽度会随着浏览器窗口的改变而改变，而元素的padding也是取的父容器的宽度。

栗子：

        html:

         css:

    .container {
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        background: #efefef;
        padding-top: calc(25/25*100%);
    }
    .target{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: pink;
    }

这样就形成了一个1:1等比的容器盒子。

更高级酷炫一些的做法

利用CSS3条件判断——@supports  calc  +  var 的计算

css:

[style*="--aspect-ratio"] > :first-child {
        		width: 100%;
    	}
	[style*="--aspect-ratio"] > img {  
  		height: auto;
	} 
	@supports (--custom:property) {
 		[style*="--aspect-ratio"] {
    		position: relative;
  	}
  	[style*="--aspect-ratio"]::before {
   		 content: "";
   		 display: block;
 		 padding-bottom: calc(100% / (var(--aspect-ratio)));
 	 }  
	[style*="--aspect-ratio"] > :first-child {
    		position: absolute;
   		top: 0;
   		left: 0;
    		height: 100%;
  	}  
 }

html: 

参考地址：https://www.w3cplus.com/css3/css3-supports.html 

前端交流wx群二维码，有超级大佬噢（失效加 JJVae1）：