.zoomImage{
    width:100%;
    height:0;
    padding-bottom: 100%; 
   overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat; 
   -webkit-background-size:cover;
    -moz-background-size:cover; 
   background-size:cover;
}

这里的原理是与背景图片方式实现

做站经常遇到，前台一些图片与实际展示的尺寸有出入，所以需要重新定义一下图片的大小，我用这方法解决的。

来说说原理吧。

<h2 style="box-sizing: border-box; outline: 0px; margin: 8px 0px 16px; padding: 0px; font-family: " microsoft="" yahei",="" "sf="" pro="" display",="" roboto,="" noto,="" arial,="" "pingfang="" sc",="" sans-serif;="" font-size:="" 24px;="" color:="" rgb(79,="" 79,="" 79);="" line-height:="" 32px;="" overflow-wrap:="" break-word;="" font-variant-ligatures:="" common-ligatures;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);"="">原理剖析

width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;

<h2 style="box-sizing: border-box; outline: 0px; margin: 8px 0px 16px; padding: 0px; font-family: " microsoft="" yahei",="" "sf="" pro="" display",="" roboto,="" noto,="" arial,="" "pingfang="" sc",="" sans-serif;="" font-size:="" 24px;="" color:="" rgb(79,="" 79,="" 79);="" line-height:="" 32px;="" overflow-wrap:="" break-word;="" font-variant-ligatures:="" common-ligatures;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);"="">样式中的上面四句主要目的是为了让这个div以1：1的大小呈现，

<p style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 16px; padding: 0px; font-family: " microsoft="" yahei",="" "sf="" pro="" display",="" roboto,="" noto,="" arial,="" "pingfang="" sc",="" sans-serif;="" font-size:="" 18px;="" color:="" rgb(77,="" 77,="" 77);="" line-height:="" 26px;="" overflow-wrap:="" break-word;="" font-variant-ligatures:="" common-ligatures;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);"="">虽然height：0；高度为0，但是它的padding值为100%

这是因为在padding为百分比的时候，是根据他父层的宽度来进行计算的。

在一点MDN关于padding的文档 也有说到，有兴趣的同学可以看看。

background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;

<p style="box-sizing: border-box; outline: 0px; margin-top: 0px; margin-bottom: 16px; padding: 0px; font-family: " microsoft="" yahei",="" "sf="" pro="" display",="" roboto,="" noto,="" arial,="" "pingfang="" sc",="" sans-serif;="" font-size:="" 18px;="" color:="" rgb(77,="" 77,="" 77);="" line-height:="" 26px;="" overflow-wrap:="" break-word;="" font-variant-ligatures:="" common-ligatures;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);"="">后面5句就是利用了css3中的 background-size:cover 的特性，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。