Make sure to keep the <div> element nested within the image

Question

Make sure to keep the <div> element nested within the image

I'm working on creating a photo album that displays images in full screen and allows users to navigate using arrows.

Check out my progress here:

Here's the HTML code I'm using:

<div class="main">
  <div class="left">
    <a href="http://laurent.delrocq.free.fr/test/left.png" style="outline:0">
      <img src="http://laurent.delrocq.free.fr/test/left.png" alt="#">
    </a>
  </div>
  <div class="right">
    <a href="http://laurent.delrocq.free.fr/test/right.png">
      <img src="http://laurent.delrocq.free.fr/test/right.png" alt="#">
    </a>
  </div>
</div>

And this is the CSS code:

html, body {
  height: 100%;
  margin: 0;
}

a{
  outline:0;
}

.main{
    min-height: 100%;
    background-image:    url(http://laurent.delrocq.free.fr/test/img-1.jpg);
    background-size:     contain; 
    background-repeat:   no-repeat;
    background-position: center center;  
    }

.left{
    position:absolute;
    width:20%;
    height:100%;
}

.left a, .right a{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

The issue I'm currently facing is that when the browser window is too large, the arrows end up outside of the image. How can I ensure that the arrows stay within the image boundaries while still maintaining the behavior of background-size: contain;?

html css position

Answer 1

Answer №1

By creating a parent div with automatic height and width, I was able to make it adjust according to the size of the image. To prevent it from occupying 100% of the width, I used display: inline-block.

To achieve this layout, I made the parent div relatively positioned so that an absolutely positioned child div could inherit its dimensions. The implementation is straightforward once you have set up the structure.

.auto {
width:auto;
height:auto;
position:relative;
display:inline-block;
}

.absolute {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:2;
}

.left {
position:absolute;
top:50%;
left:15px;
transform: translateY(-50%);
}

.right {
position:absolute;
top:50%;
right:15px;
transform: translateY(-50%);
}

<div class="auto">
<img src="http://uniquewebsite.com/img-1.jpg" />
<div class="absolute">
<img src="http://uniquewebsite.com/left.png" alt="#" class="left">
<img src="http://uniquewebsite.com/right.png" alt="#" class="right">
</div>
</div>

I trust this explanation clarifies any doubts you may have.

Answer 2

By creating a parent div with automatic height and width, I was able to make it adjust according to the size of the image. To prevent it from occupying 100% of the width, I used display: inline-block.

To achieve this layout, I made the parent div relatively positioned so that an absolutely positioned child div could inherit its dimensions. The implementation is straightforward once you have set up the structure.

.auto {
width:auto;
height:auto;
position:relative;
display:inline-block;
}

.absolute {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:2;
}

.left {
position:absolute;
top:50%;
left:15px;
transform: translateY(-50%);
}

.right {
position:absolute;
top:50%;
right:15px;
transform: translateY(-50%);
}

<div class="auto">
<img src="http://uniquewebsite.com/img-1.jpg" />
<div class="absolute">
<img src="http://uniquewebsite.com/left.png" alt="#" class="left">
<img src="http://uniquewebsite.com/right.png" alt="#" class="right">
</div>
</div>

I trust this explanation clarifies any doubts you may have.

Answer 3

Answer №2

Include the following code in your HTML file:

.main {
position: relative;
background-size: cover;
width: 70%;
}

This will set the background of the main section to be relative with a cover size, and if you don't want it to cover the full page, specify a width of 70% as well.

Check out the demo for reference.

Answer 4

Include the following code in your HTML file:

.main {
position: relative;
background-size: cover;
width: 70%;
}

This will set the background of the main section to be relative with a cover size, and if you don't want it to cover the full page, specify a width of 70% as well.

Check out the demo for reference.

Make sure to keep the <div> element nested within the image

Answer №1

Answer №2

Similar questions

Is there a way for me to configure my website so that when a link is clicked, my PDF file will automatically open in Adobe

Ways to modify the text of an HTML element when hovering over it

Issues arising from script tags causing disturbances in CSS

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

What are alternative methods for creating a table layout without relying on traditional table elements?

Conceal the unstyled element and reveal its adjacent sibling?

Optimizing mobile page layouts with CSS

Display HTML content generated by JavaScript in the page source

pointing out the existing issues with the menu

Creating a new file in Java to begin coding in HTML, CSS, and JavaScript

"Enhance Your Website with jQuery Mobile's Multi-Page Setup and Panel

Bootstrap's landing page problem

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Curves are unable to form on borders using the border-radius property

Broaden the default className attribute of the component

How to ensure the height of an image in a Bootstrap flex row matches the

Picture not showing up when loading iPhone video

Creating a responsive navbar with a custom width form

CSS trick for stylish arrow placement on top of a slide

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement