先月、画像のフレーミングをより細かく制御できる新しいパラメーターをリリースしました。以前は、画像に均一な境界線とパディングを追加することしかできませんでした。そのため、imgix レンダリング API を使用して特定の視覚効果やレイアウトを実現することが困難でした。新しいパラメーターでは、境界線またはパディングが適用されている画像の両側を調整できるようになりました。
この記事では、新しいパラメーターを使用して画像の境界線とパディングをカスタマイズする方法の概要を説明します。
ボーダーとパディングの違いは？
ボーダーとパディングのパラメーターはどちらも画像の周囲にフレームを作成する場合に同様の機能を提供しますが、それぞれに個別のプロパティがあるため、特定のユースケースでは他のパラメーターよりも適しています。
まず、ボーダーパラメーターは画像上に色付きのストロークを適用しますが、パディングでは画像の外側に空のピクセルが作成され、背景で塗りつぶされます。これら 2 つのプロパティは、以下の比較からわかるように、他のパラメーターとの相互作用が異なります。
からのストローク以来 境界 パラメータは画像の計算されたスペース内に追加されるため、テキストを境界線上に配置する必要があるレイアウトに適しています。
それ以外の場合は、画像を覆わないフレームを追加するだけの場合にパディングが役立ちます。
新しいボーダーパラメーター
次の 4 つの新しい境界パラメータがあります。
以下の場合、これらのパラメータを使用して個々の境界線サイズを変更します。 境界 が適用されます。不均一な境界線の一般的な使用例は、テキスト付きのイメージカードを作成することです。新しい境界線のバリエーションを使うと、片面の境界線を作成し、そのどちらとも組み合わせることができます。 txt または マークを付けます。
ボーダーバリエーションを使用するには、最初にイニシャルを設定する必要があります 境界 境界線のサイズを変更する前に。
キャプション付きの写真
ボーダーとマークを使用した製品カード
左の例では、 ボーダー = 0,16232D 初期ボーダーを設定します。その後、申請します。 ボーダーボトム=200 下の境界線のサイズを200pxに増やします。その後、テキストをオーバーレイします txt & マークを付けます キャプション付きのイメージカードを作成します。
右の例では、組み合わせます ボーダー = 0,16232D と ボーダー右=200 大きな右側の境界線を作成します。その後、 マークを付けます パラメーターを使用して画像の右下に説明を追加し、製品名を含む画像カードを作成します。
新しいパディングパラメーター
パディングの新しいパラメータは、次の 4 つです。
これらを使用すると、画像の側面に選択的にパディングを追加して、人目を引くフレームを作成できます。
ポスタースタイル
ポラロイドスタイル
とは違います 境界ただし、最初の境界線を設定する必要がありますが、新しいパディングパラメータは画像に個別に適用できます。左の例では、2 つのパラメーターのみを使用して側面にパディングを適用しています。 パッド右=40&パッド左=40。
新しいパディングパラメータは修飾子としても使用できます。右の例では、元のパディングを変更しています (パッド=60) 申請により パッドボトム=240 ポラロイドスタイルのカードを作成します。
ここをクリック ボーダーとパディングのドキュメント全文を読むにはこれらの新しいパラメータについてご質問やご意見がございましたら、 お知らせください。
