Html 在对象适合和对象位置的图像上居中文本覆盖（CSS网格）

我想知道是否有可能在适合对象的图像上有一个居中的文本覆盖标题：contain；和对象位置：左上；不居中

图像正在CSS网格中显示。显示：网格

我正在尝试做的示例：

.集装箱{ 高度：40vw； 宽度：40vw； 边框：1px纯黑； 显示：网格； } img{ 最大宽度：100%； 最大高度：100%； 身高：100%； 宽度：100%； 对象匹配：包含； 对象位置：左上； }

---

以下是众多解决方案之一：

使用位置：相对；在.container上，然后选择位置：绝对；在这里的文本中，我使用h3重新定位它，从顶部使用-10vh

HTML:

---

以下是众多解决方案之一：

使用位置：相对；在.container上，然后选择位置：绝对；在这里的文本中，我使用h3重新定位它，从顶部使用-10vh

HTML:

控制替换内容在其容器中的放置方式。就布局和定位而言，您无权访问替换的内容。在网格中实现所需效果的一种方法是添加一个新容器，根据容器值在图像上设置一些宽度/高度属性，然后相对于该图像定位文本，避免使用对象拟合

.集装箱{ 对齐项目：开始； 高度：40vw； 宽度：40vw； 边框：1px纯黑； 显示：网格； } img{ 显示：块； 高度：自动； 保证金：0自动； 最大高度：40vw； 最大宽度：40vw； } .textcontainer{ 位置：相对位置； } .textcontainer-x-text{ 颜色：柠檬黄； 字体系列：无衬线； 字体大小：粗体； 左：50%； 位置：绝对位置； 文本对齐：居中； 文本转换：大写； 最高：50%； 转化：转化-50%，-50%； } 肖像画

示例文本可能很长 景观

示例文本可能很长 方格

示例文本可能很长 控制替换内容在其容器中的放置方式。就布局和定位而言，您无权访问替换的内容。在网格中实现所需效果的一种方法是添加一个新容器，根据容器值在图像上设置一些宽度/高度属性，然后相对于该图像定位文本，避免使用对象拟合

.集装箱{ 对齐项目：开始； 高度：40vw； 宽度：40vw； 边框：1px纯黑； 显示：网格； } img{ 显示：块； 高度：自动； 保证金：0自动； 最大高度：40vw； 最大宽度：40vw； } .textcontainer{ 位置：相对位置； } .textcontainer-x-text{ 颜色：柠檬黄； 字体系列：无衬线； 字体大小：粗体； 左：50%； 位置：绝对位置； 文本对齐：居中； 文本转换：大写； 最高：50%； 转化：转化-50%，-50%； } 肖像画

示例文本可能很长 景观

示例文本可能很长 方格

示例文本可能很长

---

为什么不简单地把图像作为背景呢？背景尺寸：contain和背景位置：top LEFT为什么不简单地将图像作为背景？背景尺寸：包含，背景位置：左上方非常感谢您的回答。我还添加了一个例子，当我有一个'肖像'比例图像。请参阅附加的第二个屏幕截图。如果你对“肖像”比例格式有任何想法，请让我知道。非常感谢。同样的原则，这一次你只需要将文本垂直居中，并计算出拍摄图像的宽度。非常感谢你的回答。我还添加了一个例子，当我有一个'肖像'比例图像。请参阅附加的第二个屏幕截图。如果你对“肖像”比例格式有任何想法，请让我知道。非常感谢。同样的原则，这一次你只需要将文本垂直居中，并计算出拍摄图像的宽度。

<div class="container">
  <img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/A825/production/_103954034_gettyimages-990971906.jpg">
  <h3>LOREM IMPSUM</h3>
</div>

.container {
  height: 40vw;
  width: 40vw;
  border: 1px solid black;
  display:grid;
  position: relative;
}

img {
  max-width: 100%;
  max-height:100%;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: left top;
}

h3 {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -10vw);
  top: 20vw;
}