使用文本覆盖将图像设为 100% 宽度答案

【问题标题】：Get image to 100% width with text overlay使用文本覆盖将图像设为 100% 宽度
【发布时间】：2021-01-22 03:22:01
【问题描述】：

我正在尝试获取一个高度为 450 像素的部分，并且在背景中应该是一张顶部带有某种文本框的图片。

我只是无法使用边距切换到图片。我希望它更加居中，但无论我使用什么，它都不起作用。即使我在任何类中将宽度设置为 100%，它也不会填充 100%。

.text-and-image {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 450px;
  display: flex;
  overflow:hidden;
  object-fit: cover;
  background: steelblue;

  /* background: rgb(156, 156, 156); */
}


.text-and-image-box{
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-and-image-image{
  width: 100%;
  max-height: 600px;
  height: auto;
  background: yellow;
  object-fit: cover;
}

.text-and-image-box2{
  position: absolute;
  top: 10%;
  left: 55%;
  width: 35%;
  padding: 2%;
  height: auto;
  background: white;
}

.text-and-image-caption{
  position: relative;
  height: auto;
  background: white;
  font-size: 30px;
  font-style: oblique;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" name="Website">
    <link rel="stylesheet" href="./fragebeispiel.css">
    <title>AMH Solingen</title>
  </head>

  <body>



<!-- Text neben Bild -->
<div class="text-and-image">

  <div class="text-and-image-box">
    <img class="text-with-image-image" src="https://images.unsplash.com/photo-1513135065346-a098a63a71ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80">
  </div>

  <div class="text-and-image-box2">
    <p class="text-and-image-caption">Ein schlechtes Messer fährt leichter in die Hand als ins Brot.</p>
    <p class="text-and-image-text">Jeder Hobby- oder Profikoch braucht gutes Werkzeug. Nur damit macht es Spaß und ist sicher. Solinger Küchenmesser und Stahlwaren bestechen schon seit Jahrhunderten durch ausgezeichnete Qualität, hohe Langlebigkeit und innovative Lösungen. Das merkt man und hat seinen Weg schon in Millionen von Küchen in aller Welt gefunden. Unser Statement: </p>
  </div>
</div>


</body>

</html>

【问题讨论】：

您有一个未应用的 CSS 规则 .text-and-image-image，因为 HTML 中的类是 text-with-image-image。

标签： html css

【解决方案1】：

希望这是您想要实现的目标。据我了解，您希望将框居中放置在图像中间。

我使用的逻辑是计算.text-and-image-box2 的左侧位置（父级的100% - 自身宽度/2）

编辑：我也会考虑检查你的 CSS 并清理一下。有很多“不必要的噪音”可以去除，比如 object-fit 3xtimes

.text-and-image {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 450px;
  display: flex;
  overflow:hidden;
  object-fit: cover;
  background: steelblue;
  justify-content: center;
  align-items: center;

  /* background: rgb(156, 156, 156); */
}


.text-and-image-box{
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.text-and-image-image{
  width: 100%;
  max-height: 600px;
  height: auto;
  background: yellow;
  object-fit: cover;
}

.text-and-image-box2{
  position: absolute;
  left: calc(100% - 17,5%);
  width: 35%;
  padding: 2%;
  height: auto;
  background: white;
}

.text-and-image-caption{
  position: relative;
  height: auto;
  background: white;
  font-size: 30px;
  font-style: oblique;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" name="Website">
    <link rel="stylesheet" href="./fragebeispiel.css">
    <title>AMH Solingen</title>
  </head>

  <body>



<!-- Text neben Bild -->
<div class="text-and-image">

  <div class="text-and-image-box">
    <img class="text-with-image-image" src="https://images.unsplash.com/photo-1513135065346-a098a63a71ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80">
  </div>

  <div class="text-and-image-box2">
    <p class="text-and-image-caption">Ein schlechtes Messer fährt leichter in die Hand als ins Brot.</p>
    <p class="text-and-image-text">Jeder Hobby- oder Profikoch braucht gutes Werkzeug. Nur damit macht es Spaß und ist sicher. Solinger Küchenmesser und Stahlwaren bestechen schon seit Jahrhunderten durch ausgezeichnete Qualität, hohe Langlebigkeit und innovative Lösungen. Das merkt man und hat seinen Weg schon in Millionen von Küchen in aller Welt gefunden. Unser Statement: </p>
  </div>
</div>


</body>

</html>

【讨论】：

一个孩子只能获得其父级的 100% 宽度还是仍能获得整个页面的 100% 宽度？还要感谢您突出显示多余的对象匹配
当然，建议：去 codepen 并创建一个 div (parentDiv) 并在该 div 中创建另一个 (childDiv)。给父 div 和 height 和 width 和 bg 颜色。对于您的孩子，给定绝对位置和比其父级多几个像素的宽度。结果：溢出父级
只要我不使用绝对位置，而是说相对位置。 childDiv 会留在 parentDiv 中吗？
我告诉你如何在codePen中查看绝对定位大小写。对所有你有疑问的情况做同样的事情；）这样做你会更好地理解它