商品详情页如何通过css设置图片宽高为正方形，并能适应任意屏幕

1、html布局如下

2、css代码如下：

.deatilImg{position:relative;width: 100%;height: 0;padding-top: 100%;}

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