Make element same width as dynamically sized image?

Question

I have a responsive slideshow-type layout with captions below each image.

I\'m attempting to get the caption to be the same width as the image. The problem is that the i

Answer 1

In this fiddle, I've gotten the desired effect using different display rules, as well as calculating using the vh unit. I stripped out superfluous markup and CSS, but this should be a good starting point that you can use and build on.

Code:

#big_container {
  white-space: nowrap;
}
.little_container {
  display: inline-block;
  width: 100%;
}
figure {
  display: table;
  margin: 0 auto;
}
img {
  height: calc(100vh - 40px);
}
figcaption {
  display: table-caption;
  caption-side: bottom;
  background-color: #ffffd;
  padding: 10px;
  line-height: 20px;
}

  

    

      
      

        have a kitty!!1
      
    
  

  

    

      
      

        moar kitty!
      
    
  

  

    

      
      

        too many kitty..