imgix 响应式图片处理框架

imgix.js 是一个免费的javascript类库，可以通过调用imgix api 使网站在不同的设备上显示都一样。它附带了一些文本格式、调色板提取、颜色调整。

1. 自动响应式图片，调用 imgix.fluid() 可以自动调节图片的大小和尺寸的方法，使图片适应不同的屏幕分辨率。图片将自动更新和裁切到合适的尺寸。

代码：

imgix.onready(function() {
  // Applied to images that contain the imgix-fluid class
  // Can take an options object to set more specific behaviors
  imgix.fluid();
});

2.使图片做为背景，在div中添加data-src自定义属性，这样将会更具外部容器的宽度和高度自动做扩展。

代码：

/* imgix.fluid() optional parameters */
var bgOptions = {
  fluidClass: 'imgix-fluid-bg',
  updateOnResizeDown: true,
  updateOnPinchZoom: true,
  pixelStep: 10,
  autoInsertCSSBestPractices: true,
  onChangeParamOverride: function(w, h) {
     /* Override and insert additional imgix parameters*/
     /* Currently displaying information about the image size and dpr */
    var dpr = Math.ceil(window.devicePixelRatio*10) /10;
    return {
      "txt": "w:" + w + " h:" +h + " dpr:" + dpr,
      "txtalign": "center,bottom",
      "txtsize": 20,
      "txtfont": "Helvetica%20Neue,bold",
      "txtclr": "ffffffff",
      "txtpad": 20,
      "txtfit": 'max',
      "exp": -2
    };
  }
};
imgix.onready(function() {
  imgix.fluid(bgOptions);
});

3. 利用html元素 通过设置div的 class="imgix-fluid-bg"

代码：

<div class="imgix-fluid-bg feature-image" data-src="https://assets.imgix.net/examples/ape.jpg?fit=crop&crop=faces"></div>

4  通过CSS媒介查询实现 通过 background: cover 和 background-position: 50% 50%, and background-repeat: no-repeat，通过设置padding-bottom 来改变元素的显示高度。

代码：

.feature-image{
  width: 23%;
  padding-bottom: 23%;
  margin: .5em 1%;
  display: block;
  float: left;
}
.header-image{
  width: 98%;
  margin: .5em 1%;
  height: 500px;
}
@media (max-width:1024px){
  .feature-image {
    width: 48%;
    padding-bottom: 65%;
    margin: .5em 1%;
  }
}
@media (max-width:480px){
  .header-image, .feature-image {
    height: auto;
    width: 100%;
    padding-bottom: 75%;
    margin: .25em 0;
  }
}

 

出处：https://www.imgix.com/imgix-js。