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

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35197{{"コンテナ内に画像を収める"}} css/colors -.-> lab-35197{{"コンテナ内に画像を収める"}} css/borders -.-> lab-35197{{"コンテナ内に画像を収める"}} css/width_and_height -.-> lab-35197{{"コンテナ内に画像を収める"}} css/positioning -.-> lab-35197{{"コンテナ内に画像を収める"}} css/backgrounds -.-> lab-35197{{"コンテナ内に画像を収める"}} end

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

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でさらに実験を練習してください。