stretchMode

stretchMode

画像を引き伸ばすかどうかを指定します。

• 初期値 : /
• type : array

画像の引き伸ばしは必要ですか？ このオプションはレスポンシブ/リキッドデザインで便利です。[x, y]配列で指定します。

x、yに指定可能な値 :

• stretch
• stretch-if-smaller
• stretch-if-bigger

デモ

画像の伸縮を指定して表示しています。 上の画像は表示範囲に合わせて伸縮されていますが、 下の画像は潰れて表示されています。

['stretch-if-smaller', 'stretch-if-smaller']

['stretch', 'stretch']

JavaScript

var options = {
  opacity: [0, 0],
  states : {
    'default-state': {
      gradients: [
        ['#aaa', '#aaa'],
      ],
    }
  },
  source: '../../img/1.jpg',
};

var granimInstance = new Granim({
  element: '#granim-canvas',
  opacity: options.opacity,
  states : options.states,
  image: {
    source: options.source,
    stretchMode: ['stretch-if-smaller', 'stretch-if-smaller'],
  }
});

var granimInstance2 = new Granim({
  element: '#granim-canvas2',
  opacity: options.opacity,
  states : options.states,
  image: {
    source: options.source,
    stretchMode: ['stretch', 'stretch'],
  }
});

HTML

<h4>['stretch-if-smaller', 'stretch-if-smaller']</h4>
<canvas id="granim-canvas"></canvas>
<h4>['stretch', 'stretch']</h4>
<canvas id="granim-canvas2"></canvas>

CSS

canvas {
  width: 100%;
  height: 160px;
}