使文字与图像完美契合答案

【问题标题】：Make text fit perfectly with image使文字与图像完美契合
【发布时间】：2020-12-14 01:29:54
【问题描述】：

大家好，有没有一种方法可以让文本与 Netflix 的图像完美契合 https://www.netflix.com/ng/title/81067760 我已经有了图片，但是现在让文本完全适合并且不覆盖图片对我来说是不可能的这是我的图片代码

  <!DOCTYPE html>
   <html lang="en" dir="ltr">
     <head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<picture>
<source class="mov" media="(max-width: 599px)"  srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
<img class = "d-block w-100 img"  src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
</picture>
 <div class = "details">
<h1><%=Details.title %></h1>
  <p><%=Details.release_date%></p>
     <h2><%=Details.description%></h2>
    </div>
    </head>
 </body>
</html>

问题是我如何使 div 类的细节适合我只需要复制大图像以及文本如何像 Netflix 那样垂直对齐到屏幕左侧的图像。查看此链接https://www.netflix.com/ng/title/81067760 希望现在更清楚了，谢谢...

【问题讨论】：

不知道你到底想要什么。
请澄清您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css image

【解决方案1】：

我不确定您要复制哪个 netflix 元素，但我可以向您展示如何使用 .details 类垂直对齐图像。

首先将 div class='container' 包裹在图片和 div class='details' 元素周围。

<!DOCTYPE html>
   <html lang="en" dir="ltr">
     <head>
<body style="background-color: #323232">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">

<div class='container'>
    <picture>
        <source class="mov" media="(max-width: 599px)"  srcset="https://image.tmdb.org/t/p/original<%=Details.poster_path%>" >
        <img class = "d-block w-100 img"  src = "https://image.tmdb.org/t/p/original<%=Details.backdrop_path%>">
    </picture>
    <div class = "details">
    <h1><%=Details.title %></h1>
      <p><%=Details.release_date%></p>
         <h2><%=Details.description%></h2>
    </div>
</div>
 </head>
 </body>
</html>

将以下行添加到 styles.css 的顶部

.container {
    display: flex;
    align-items: center;
}

Flexbox 非常适合这种事情。阅读here

如果有帮助，请告诉我。

【讨论】：

【解决方案2】：

也许 z-index 属性是可以帮助您的属性。 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

这是允许文本覆盖图像的方法之一。抱歉，如果我没有正确理解您的话。

【讨论】：

能否添加一些来自 MDN 的代码或解释？