Nessen Nessen - 1 month ago 16
HTML Question

make parent div same size as child div and center additional child element in parent

I made the following plnkr:

https://plnkr.co/edit/WXDs0FPuOHeOp8WN9aaZ?p=preview

The parent container is called slide and has the following child elements:
prev, next and figure.

<div id='slide' class='slide'>

<figure id="0" class="show"><img src="http://www.naamagazine.com/wp-content/uploads/2016/05/couple-getaways-image-520x400.jpeg">
<figcaption>Some Text</figcaption>
</figure>

<span class="prev">‹</span>
<span class="next">›</span>

</div>


Here is my css code:

.slide{
padding: 0;
width: 100%;
display: inline-block;
margin: 0 auto;
position: relative;
}
figure{
width: 100%;
position: absolute;
opacity: 0;
margin:0;
padding:0;
transform: scale(0);
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
}


I would like the parent div to be the same size as the child element 'figure' so that the next and prev divs are aligned to the right and left of the 'figure' element. I do not wish to set the width and height of the parent fixed as it would not be responsive.

I do not wish to add the 'next' and 'prev' divs inside the 'figure' element as i plan to have a lot of figure element and would not like it to be repetitive, adding these divs inside each figure element.

I would just like the parent to be responsive and same size as the child element with prev and next divs attached to the parent.

Please view my code here:
https://plnkr.co/edit/WXDs0FPuOHeOp8WN9aaZ?p=preview

Answer

The buttons actually are aligned to the edges of the container already - the issue is just that the image doesn't scale up along with it. In your style.css, change this:

img{
  max-width: 100%;

to this:

img{
  width: 100%;

and you should see the image edges and the arrows line up, and scale as the window does.

As far as getting the arrows vertically centered - that could be tricky unless you set a height on the .slide element. This can still be responsive, as long as you know the aspect ratios of the images in the slides. Here's a trick to do that using bottom padding - set it based on the aspect ratio you want. Then set your images to width: 100%; height: 100%; position: relative; and as long as the proportions are right, they should all fit properly.

figure {
  position: absolute;
  width: 100%;
  height: 0;

  /* This will make a box that's always twice as wide as it is tall */
  padding-bottom: 50%;

  /* This one's twice as tall as it is wide */
  padding-bottom: 200%;
}