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

Updated

Based on the exact requirements you set for this question, it can't be solved with CSS only.

This is the best I was able to come up with.

Fiddle demo 1 (fixed height for text, image fully visible)
Fiddle demo 2 (semitransparent scaleable text on top of image with animation)

The trick I mainly used is having a hidden img to make up for the space and then a background-image to scale to maximum width/height with kept ratio.

I added the inline style background-image for convenience, so content can be handled within the html.

To make it perfect, a script is needed, which calculate the caption's content and adjust the image's/caption's reduction/height.

Snippet demo 1

html, body {
  margin: 0;
  white-space: nowrap;
  overflow-y: hidden;
}
.container {
  display: inline-block;
  white-space: normal;
  width: 100%;
}
.wrap {
  margin: 0 auto;
  display: table;
}
.image {
  display: table-cell;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain; 
}
.image img {
  visibility: hidden;
  max-width: 100vw;
  min-width: 100%;
  height: calc(100vh - 80px);
}
.caption {
  display: table-caption;
  caption-side: bottom;
  height: 40px;
  line-height: 22px;
  padding: 8px;
  background-color: #ffffd;
  overflow: hidden;
}
.right {
  text-align: right; 
}

  

    

      
    
    

      moar kitty!
      moar kitty!
      moar kitty!
    
  



  

    

      
    
    

      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
      have a kitty!!1
    
  



  

    

      
    
    

      too many kitty..
      too many kitty..
      too many kitty..
    
  

Snippet demo 2

html, body {
  margin: 0;
  white-space: nowrap;
  overflow-y: hidden;
}
.container {
  position: absolute;
  height: 100%;
  display: inline-block;
  white-space: normal;
  width: 100%;
  background: white;
  opacity: 0;
}
.wrap {
  margin: 0 auto;
  display: table;
}
.image {
  display: table-cell;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain; 
}
.image img {
  visibility: hidden;
  max-width: 100vw;
  min-width: 100%;
  height: 100vh;
}

.caption-wrap {
  display: table-caption;
  caption-side: bottom;
  position: relative;
}
.caption {
  position: absolute;  
  left: 0;
  right: 0;
  bottom: 100%;
  height: auto;
  line-height: 22px;
  padding: 8px;
  background-color: rgba(0,0,0,0.6);
  color: white;
}
.right {
  text-align: right; 
}
.center {
  text-align: center; 
}

.container:nth-child(3) {
  animation: xfade 12s 0s infinite;
}
.container:nth-child(2) {
  animation: xfade 12s 4s infinite;
}
.container:nth-child(1) {
  animation: xfade 12s 8s infinite;
}

@keyframes xfade{
  17% {
    opacity:1;
  }
  45% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}

  

    

      
    
    

      

        moar kitty!
        text .. right aligned
      
    
  



  

    

      
    
    

      

        have a kitty!!1
        have a kitty!!1
        text .. left aligned
      
    
  



  

    

      
    
    

      

        text .. centered