Placing images inside images in CSS - Html

Alexissz
April 9, 2023
220 views
0 votes
2 Answers

My plan is to build a header with a filmstrip, where each film piece acts as a modular feature photo that I can use to swiftly swap photos at any moment. I quickly sketched a general idea of what I’m aiming to achieve.
enter image description here

The problem arises when I began formatting and structuring the page. I have three div containers, the header, a sidebar, and the main div. All the photos and filmstrip are inside the same container, but the photos are appearing way below the filmstrip for some reason, and they’re leaking onto the main div.

enter image description here

I think I got the HTML portion of the container correct:

<div class = "header">
    <img src = "framesample.png" class = "launch">
    <div class = featurephotos>
      <a target = "_self" href = "photo1.html" target = "mainframe" alt = "photo1"><img class = "imagery" src = "one.jpg" width = "89" height = "71" id = "one" alt = "rc"/></a>
      <a target = "_self" href = "photo2.html" target = "mainframe" alt = "photo2"><img class = "imagery" src = "two.jpg" width = "89" height = "71" id = "two" alt = "rc"/></a>
      <a target = "_self" href = "photo3.html" target = "mainframe" alt = "photo3"><img class = "imagery" src = "three.jpg" width = "89" height = "71" id = "three" alt = "rc"/></a>
      <a target = "_self" href = "photo4.html" target = "mainframe" alt = "photo4"><img class = "imagery" src = "/four.jpg" width = "89" height = "71" id = "four" alt = "rc"/></a>
      <a target = "_self" href = "photo5.html" target = "mainframe" alt = "photo5"><img class = "imagery" src = "five.jpg" width = "89" height = "71" id = "five" alt = "rc"/></a>
      <a target = "_self" href = "photo6.html" target = "mainframe" alt = "photo6"><img class = "imagery" src = "six.jpg" width = "89" height = "71" id = "six" alt = "rc"/></a>
  </div>
</div>

However, I’m not entirely sure what I did with the CSS. Because the photos were placed all the way to the left so I added some padding. I thought I could maybe remedy the problem by adding bottom padding to each frame so I could force the photos onto the frames of the film strip, but adding bottom padding did nothing. I also did a lot of force-bruting with the CSS and I’m not entirely sure how that’ll affect responsiveness, especially with mobile.

#one{
    position: absolute;
    padding-left: 16rem;
    padding-right:0.41rem;
    
}    

#two{
    padding-right: 0.5rem;
}

#three{
    padding-right: 0.4rem;
}

#four{
    padding-right: 0.41rem;
}

#five{
    padding-right: 0.3rem;
}
.header {
    height: 0px;
    width: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
}

The fundamental problem is the images aren’t appending inside the film strip. I was hoping to make a CSS code that could easily recognize the parameters of the transparent film pieces, so that in future references in any moments I want to update that feature strip, photos could snugly fit into them instead of taking the easier route and digitally designing a new strip with six individual photos into one image, and pasting one single image file into the HTML every single time. In retrospect, it’s suddenly becoming harder than I anticipated and I’m not too sure what I’m doing now.

Answers

- obadaalayed
- April 9, 2023 at 8:39 pm
- 0 votes
0
Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won’t extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail
```
see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity
```
Login or Signup to reply.

I would do the whole thing in CSS, however – then you won’t be able to use your picture of the filmstrip. Example below:

.roll {
  display: flex;
  border: 5px solid black;
  width: min-content;
}

.frame {
  width: 200px;
}

.frame > div:nth-child(1), .frame > div:nth-child(3) {
  background-color: black;
  display: flex;
  justify-content: space-between;
  height: 20px;
  padding: 10px 20px;
  width: calc(100% - 40px);
}

.frame > div:nth-child(2) {
  width: 190px;
  height: 200px;
  padding: 0px 5px;
  background-color: black;
}

.frame > div > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.frame > div > div {
  width: 10px;
  background-color: white;
}

<div class="roll">
  <div class="frame">
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  
  <div class="frame">
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  
  <div class="frame">
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div>
      <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
    </div>
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

However, if you want to use the image of the filmstrip, you can do so.

Calculate the gap between each image in the strip, and use Flexbox to arrange the images for you. I don’t have the image of your filmstrip, so I’ll show you an example of how that would work.

.images {
  display: flex;
  gap: 20px;
  
  /* if you want to place it above the image, use absolute positioning on the whole row, and adjust accordingly.
  position: absolute;
  */
}

.images > div {
  width: 200px;
  height: 200px;
}

.images > div > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class="images">
  <div>
    <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
  </div>
  
  <div>
    <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
  </div>
  
  <div>
    <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
  </div>
  
  <div>
    <img src="https://fastly.picsum.photos/id/866/400/400.jpg?hmac=oHJBlOQwtaF75oX43dFtPf4At_GRLEx9FQqkkfpLR5U" />
  </div>
</div>

Although it doesn’t give you a completed solution to your problem, I hope it helps you into solving it yourself 🙂

Please signup or login to give your own answer.

Click here to cancel reply.

Placing images inside images in CSS – Html

Answers