网站图片调用的时候可以直接写CSS样式得到希望的比例，当然图片大致比例相似的图片产生变形较小，适合本站图片处理。当然类似七牛云的云储存，可以附加一些处理代码，根据实际情况控制图片尺寸。也就是一个文件会有不同的尺寸、清晰度，以达到较优的页面加载时间。

当然图片较少的网站可以就用纯CSS样式处理，比如长宽相等的正方形图片的写法如下：

<style type="txt/css">
.img-box{
  width:100%;
  height:0;
  position: relative;
  padding-bottom: 100%
}
.img-box img{
  width:100%;
  height:100%;
  position: absolute;
}
</style>

这种写法多用在自适应模板上，图片会随着页面的宽度改变尺寸，是正方形，只是图片会变形。另外也可以写成“裁剪”的样式，保留原度大小，不被撑大，写法如下

.img-box img{
  max-width:100%;
  max-height:100%;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

如果子元素根据父元素设置宽度，那么将其高度设置为0，并将padding-bottom设置为百分比，则该子元素的高度将根据它的宽度计算

.img-box{
      width:400px;
      height:800px;
}
.img-box img{
      width:100%;
      height:0;
      padding-bottom:100%;
      background-color: #0f8bcb;
}

如果子元素是图片，需要使用下面的方法

.img-box-parent{
      width:400px;
      height:800px;
}
.img-box{
      width:100%;
      height:0;
      padding-bottom:100%;
      position: relative;
}
.img-box img{
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
}