Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.8k views
in Technique[技术] by (71.8m points)

html - Get image to 100% width with text overlay

What I am trying is to get a section that has a height of 450px and in the background should be a picture with sort of a text-box on top of it.

I just can not make a shift to the picture with using margins. I would like it to be more centered, but whatever I use, it does not work. Also it does not fill 100% even if I set width to 100% in any class.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Hopefully this is what you are trying to achieve. From what I understood you want to centre the box in the middle of the image.

The logic I used was calculating the left position of .text-and-image-box2 (100% of parent - own width/2)

Edit: I would also consider going over your css and cleaning it up a little. There is a lot of "unnecessary noise" that can be removed such as 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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...