div doesn’t fit all the img [closed]

by

I have a div that doesn’t fit all the img this is the code (I’m using Bootstrap 5)

The results: https://imgur.com/a/qqhYsNw

The goal is this: When I try to put a div it go under the H1 not under the img

Edit:
I want to see all the image

Code Snippet

.screen {
  flex-wrap: wrap;
  max-width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 85px red;
  -webkit-box-shadow: inset 0px 0px 85px red;
  -moz-box-shadow: inset 0px 0px 85px red;
}

.screen h1 {
  z-index: 1;
  color: white;
  font-family: "Playfair Display";
  margin-right: 3rem !important;
  padding-top: 8%;
  padding-left: 10%;
  height: 100%;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 30px;
  font-size: 3.5vw;
}

.screen img {
  z-index: -1;
}

#fill {
  max-width: 100%;
  max-height: 100%;
}
<div class="d-flex flex-column wrapper screen">
  <h1 class="align-self-start flex-fill"> Appartamenti Torre </h1>
  <img src="https://i.postimg.cc/4fS9N6GL/1DrGDZw.jpg" alt="" class="position-absolute w-100 flex-fill">
</div>


<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

  • position-absolute is probably the issue here.

    – 

I would do this completely differently by setting the image as the background on the . Otherwise, you may end up with issues on mobile devices.

Here is an example.

<div class="d-flex flex-column wrapper screen">
    <h1 class="align-self-start flex-fill">Appartamenti Torre</h1>
</div>

.screen {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url("./img/render1.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Leave a Comment