如何让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>