简介
在本实验中,我们将学习如何使用 CSS 在保持图像宽高比的同时,使其在容器内适配和定位。我们将探讨 object-fit
和 object-position
属性,以及如何使用它们来实现不同的效果。完成本实验后,你将能够创建出在指定空间内完美适配的视觉上吸引人的图像。
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版
在本实验中,我们将学习如何使用 CSS 在保持图像宽高比的同时,使其在容器内适配和定位。我们将探讨 object-fit
和 object-position
属性,以及如何使用它们来实现不同的效果。完成本实验后,你将能够创建出在指定空间内完美适配的视觉上吸引人的图像。
虚拟机中已经提供了 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 中练习更多实验来提升你的技能。