У меня есть отзывчивый макет слайд-шоу с надписями под каждым изображением.
Я пытаюсь получить заголовок такой же ширины, как и изображение. Проблема в том, что изображение масштабируется, чтобы поместиться в браузере по вертикали, а мои титры - это получение ширины изображения до масштабирования.
#big_container {
display:block;
position:relative;
width:100%;
padding-bottom:40%;
white-space:nowrap;
overflow-x:scroll;
overflow-y:hidden;
}
#big_container>div {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
.little_container {
display:inline-block;
height:100%;
width:100%;
text-align:center;
}
#big_container figure {
display:inline-block;
height:100%;
margin:0;
}
figure img {
max-height:calc(100% - 40px); /* subtract height of caption */
}
figcaption {
display:block;
width:100%;
text-align:left;
box-sizing:border-box;
margin:0;
padding:10px;
line-height:20px;
background-color:#ddd;
}
<div id="big_container">
<div>
<div class="little_container">
<figure>
<img src="http://placekitten.com/500/440">
<figcaption>
have a kitty!!1
</figcaption>
</figure>
</div>
<div class="little_container">
<figure>
<img src="http://placekitten.com/450/400">
<figcaption>
moar kitty!
</figcaption>
</figure>
</div>
<div class="little_container">
<figure>
<img src="http://placekitten.com/300/440">
<figcaption>
too many kitty..
</figcaption>
</figure>
</div>
</div>
</div>