在容器中适配图像

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习如何使用 CSS 在保持图像宽高比的同时,使其在容器内适配和定位。我们将探讨 object-fitobject-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

在容器中适配图像

虚拟机中已经提供了 index.htmlstyle.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 8080”标签页来预览网页。

总结

恭喜你!你已经完成了“在容器中适配图像”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程