Clever Geek Handbook

Save div inside image

I am creating a kind of photo album on "full" screen. I want to display arrows above the image in order to be able to navigate to the previous / next.

Here's my attempt:

https://jsfiddle.net/q49wzey6/

html code:

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

CSS

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 problem is that if the browser window is too large, the arrows move outside of the image

How can I make sure the arrow stays inside the image and that the image still behaves like this background-size: contain;

?

+3


source to share


2 answers


I made a parent div with auto height and auto width so that it adapts to the image size. It also has display: inline-block

, otherwise it would be 100% wide.

I positioned the parent relatively so within it. I could set the child div to be absolute, which picks the height and width from the parent. The rest is easy.



.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://laurent.delrocq.free.fr/test/img-1.jpg" />
<div class="absolute">
	<img src="http://laurent.delrocq.free.fr/test/left.png" alt="#" class="left">
	<img src="http://laurent.delrocq.free.fr/test/right.png" alt="#" class="right">
</div>
</div>
Run codeHide result


Hope this helps.

0


source


add

position: relative;
background-size: cover;

in.main



and if you don't want the image to span the entire page, specify the width and width: 70%;

demo

0


source






More articles:


All Articles