在容器中适配图像

简介

在本实验中，我们将学习如何使用 CSS 在保持图像宽高比的同时，使其在容器内适配和定位。我们将探讨 object-fit 和 object-position 属性，以及如何使用它们来实现不同的效果。完成本实验后，你将能够创建出在指定空间内完美适配的视觉上吸引人的图像。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

在容器中适配图像

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

总结

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