【CSS|CSS之设置图片宽度100%，高度等于宽度】html代码如下：
/*stulus语法*/
.img{
position:relative;
width:100%;
height:0;
padding-top: 100%;
/*padding-bottom都可以*/
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
在CSS中，padding-top和padding-bottom这两个属性的百分号是根据元素的宽度计算的，所以设置为100%，元素.img的宽度和高度就一样了。
但子元素img要正确放置在div.img中，则需要将div.img设置为relative，然后将img设置为absolute，然后img定位为top:0,left:0，如果不设置定位，那么img会从div.img右下角开始显示，超出了div.img的范围，页面上显示不出来
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）