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

This seems like a good fit for flexboxes. They work in all the modern browsers (http://caniuse.com/#feat=flexbox) and in IE 10/11 with some special CSS as noted below.

Fiddle (For some reason the captions are stretching in IE on the Fiddle but it works in the browser.)

#big_container {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding-bottom: 40px;
  display: flex;
  flex-flow: horizontal;
  align-items: flex-start;
  justify-items: space-around;
  flex-wrap: no-wrap;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
}

.little_container {
  display:inline-block;
  height:100%;
  min-width: 100vw;
  text-align:center;
  display: flex;
  flex-flow: vertical;
  align-items: center;
  justify-content:center;
  flex-direction: column;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  -ms-flex-wrap: nowrap;
  -ms-flex-direction: column;
  -ms-flex-pack: start;
  -ms-flex-align: center;
}


figure {
  width: -moz-min-content;
  width: -webkit-min-content;
  position: relative;
  text-align:center;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  align-items: stretch;
  justify-content:center;
  margin:auto;

  /* For IE 10, 11 */
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  -ms-flex-line-pack: center;
}

figure img {

  display:block;
  text-align:left;
  box-sizing: border-box;
  margin:0;
  max-height:calc(100% - 40px); /* subtract height of caption */
  -ms-flex: 0 0 calc(100%-40);
  display: block;

}

figcaption {
  display:block;
  text-align:left;
  box-sizing: border-box;
  margin:0;
  padding:10px;
  line-height:20px;
  background-color:#ffffd;
  -ms-flex: 1 1 60%;
  max-width: 100%;

}

I took out the extra

inside #big_container that wrapped the smaller items because it did not seem necessary.

  

      

        
        

          I has kitty!!
        
      
  

  

      

        
        

          moar kitty!
        
      
  

  

      

        
        

          I has too many kitty. but I still need moar. Oh! No!!!!! I cannot get enuf!
        
      
  

Also, if you don't already know about them, look into the CSS Viewport units vw and vh. http://caniuse.com/#feat=viewport-units

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...