图像上的居中文本叠加是对象适合和对象位置（CSS GRID）

Posted 2023-03-05

【中文标题】图像上的居中文本叠加是对象适合和对象位置（CSS GRID）

【英文标题】：Centered text overlay on image that is object-fit & object-position (CSS GRID)

【发布时间】：2019-07-22 23:02:24

【问题描述】：

我想知道是否可以在适合对象的图像上放置居中的文本覆盖（标题）：包含； AND 对象位置：左上角； （即不居中）

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

我正在尝试做的示例：

.container 
  height: 40vw;
  width: 40vw;
  border: 1px solid black;
  display:grid;


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

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

提前谢谢你！

【问题讨论】：

为什么不简单地将图像作为背景？背景尺寸：包含和背景位置：左上角

【参考方案1】：

这是众多解决方案之一：

在.container 上使用position: relative;，然后在文本上使用position: absolute;（这里我使用h3）重新定位它，使用来自top 的-10vh。

html：

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

CSS：

.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;
   

【讨论】：

非常感谢您的回答。我还添加了一个示例，说明当我有一个“人像”比例图像时。请参阅随附的第二个屏幕截图。如果您对“纵向”比例格式有任何想法，请告诉我。谢谢！

同样的原则，这次你只需要将文本垂直居中并评估图像的宽度。

【参考方案2】：

object-fit 控制替换内容如何适应其容器。在布局和定位方面，您无权访问被替换的内容。在网格中实现所需效果的一种方法是添加一个新容器，根据容器值在图像上设置一些 width/height 属性，然后相对于该图像定位文本，避免对象拟合的使用。

.container 
  align-items: start;
  height: 40vw;
  width: 40vw;
  border: 1px solid black;
  display:grid;


img 
  display: block;
  height: auto;
  margin: 0 auto;
  max-height: 40vw;
  max-width: 40vw;


.textcontainer 
  position: relative;


.textcontainer-x-text 
  color: limegreen;
  font-family: sans-serif;
  font-weight: bold;
  left: 50%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  transform: translate(-50%, -50%);

<p>Portrait</p>
<div class="container">
  <div class="textcontainer">
    <div class="textcontainer-x-text">Example Text Which Could Be Long</div>
    <img src="http://placehold.it/150x400">
  </div>
</div>

<p>Landscape</p>
<div class="container">
  <div class="textcontainer">
    <div class="textcontainer-x-text">Example Text Which Could Be Long</div>
    <img src="http://placehold.it/300x150">
  </div>
</div>

<p>Square</p>
<div class="container">
  <div class="textcontainer">
    <div class="textcontainer-x-text">Example Text Which Could Be Long</div>
    <img src="http://placehold.it/300x300">
  </div>
</div>