カバー

画像、ビデオ、またはiframeをコンテナ全体を覆うように拡大し、その上に独自のコンテンツを配置します。

使用方法

画像を親要素を覆うようにするには、親に.uk-cover-containerクラスを追加し、画像にuk-cover属性を追加します。

<div class="uk-cover-container">
    <img src="" alt="" uk-cover>
</div>

注 カバリング要素の上にコンテンツを配置するには、位置コンポーネントを使用します。コンテンツを見やすくするために、反転コンポーネントから.uk-lightまたは.uk-darkクラスを追加します。

ビデオ

親コンテナを覆うビデオを作成するには、ビデオにuk-cover属性を追加します。ビデオの周りにコンテナ要素をラップし、コンテンツをクリップするために.uk-cover-containerクラスを追加します。

カバーコンポーネントは、ビデオコンポーネントのすべてのプロパティを継承します。つまり、ビデオはミュートされ、自動的に再生されます。ビデオは、表示されていないときは常に一時停止し、再度表示されると再開されます。

<div class="uk-cover-container">
    <video uk-cover></video>
</div>

Iframe

カバーコンポーネントをiframeに適用するには、iframeにuk-cover属性を追加する必要があります。次に、コンテンツをクリップするために、iframeの周りのコンテナ要素に.uk-cover-containerクラスを追加します。

<div class="uk-cover-container">
    <iframe src="" uk-cover></iframe>
</div>

レスポンシブな高さ

カバー画像にレスポンシブな動作を追加するには、非表示の<canvas>要素を作成し、カバーされる領域に必要なアスペクト比に応じてwidthとheightの値を割り当てる必要があります。そうすることで、画像のレスポンシブな動作に適応します。

<div class="uk-cover-container">
    <canvas width="" height=""></canvas>
    <img src="" alt="" uk-cover>
</div>

ビューポートの高さ

高さコンポーネントからuk-height-viewport属性を追加すると、親要素の高さがビューポート全体を埋めるように拡張されます。

<div class="uk-cover-container" uk-height-viewport>
    <img src="" alt="" uk-cover>
</div>

コンポーネントのオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションはセミコロンで区切ります。詳細

JavaScript

JavaScriptコンポーネントの詳細。

初期化

UIkit.cover(element, options);