コンテナ内に画像を収める

はじめに

この実験では、画像のアスペクト比を維持しながら、CSS を使って画像をコンテナ内に収まるように調整し、配置する方法を学びます。object-fit と object-position のプロパティを調べ、それらを使ってさまざまな結果を得る方法を学びます。この実験が終わるとき、指定されたスペース内に完璧に収まる視覚的に魅力的な画像を作成できるようになります。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

コンテナ内に画像を収める

VM 内には既に index.html と style.css が用意されています。

画像のアスペクト比を維持しながら、その画像をコンテナ内に収めるには、object-fit: contain を使用します。画像のアスペクト比を維持しながらコンテナを埋めるには、object-fit: cover を使用します。画像をコンテナの中央に配置したい場合は、object-position: center を使用できます。

これらのプロパティを使用する方法の例を以下に示します。

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />

そして対応する CSS：

.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}

.image-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: right top;
}

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！コンテナ内に画像を収める実験を完了しました。技術力を向上させるために、LabEx でさらに実験を練習してください。