如何讓img的寬高等比例(純css和js方法)

js+css+html:

css

.userimg{width:100%}

jq

$(document).ready(function(){
 var width = $('.userimg').css('width');
 var heig = parseInt(width);//var heig = parseInt(width)*0.75 寬高比4:3
 heig = heig+"px";
 $('.userimg').css('height',heig);
 // alert(width);
 })

HTML

<img src="...." clacc="userimg"/>

純css+html:

css

.img-wrap{
 width: 30%; /* 這裏設置佔屏幕寬度百分比 */
 /*margin: 0 auto; */
 }
 /* 創建一個正方形容器 */
 .img-container{
 width: 100%;
 height: 0px;
 padding-bottom: 100%;
 overflow:hidden;
 margin: 0;
 position:relative;
 }
/* 採用絕對定位 */
 .img-wrap img{
 position:absolute;
 width: 100%;
 height: 100%;
 }

html

<div class="img-wrap">
    <div class="img-container">
        <img src="radio1.png" data-mce-src="radio1.png">
    </div>
</div>