我有一个灵敏的幻灯片式布局，每个图像下方都有字幕。
我试图获得与图像宽度相同的标题。问题是图像被缩放以适应垂直浏览器，我的标题是在缩放之前获取图像的宽度。
#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>
如何根据流体图像的宽度进行缩放？
我希望得到一个纯粹的css解决方案。
更新
原来我以上的尝试partially works in chrome and opera,but exhibits some odd behavior。
我没有发现关于这个问题的任何错误报告，但我不禁想知道这是否可能被认为是浏览器中的错误。
为了清楚起见，以下简要概述我的具体要求：
>标题元素的宽度必须与图像的宽度相同(可以将标题文字左右对齐到图像的边缘)
>图像不得裁剪或拉伸
>图像和标题必须都适合其容器(可能是流体)，使用尽可能多的空间。
>以上规则应适用于任何维度的图像
>仅CSS(与旧浏览器的兼容性不是主要问题，但它是一个加号)
可以更改html标记。
解决方法
更新
根据您为此问题设置的确切要求，它不能仅用CSS解决。
这是我能够想出来的最好的。
Fiddle demo 1(固定高度为文字，图像完全可见)
Fiddle demo 2(半透明可缩放文字顶部的动画图像)
我主要使用的技巧是拥有一个隐藏的img来弥补空间，然后是一个背景图像，以保持比例缩放到最大宽度/高度。
为了方便，我添加了内联样式的背景图像，因此可以在HTML内部处理内容。
为了使其完美，需要一个脚本，计算标题的内容并调整图像/标题的缩小/高度。
片段演示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: #ddd;
overflow: hidden;
}
.right {
text-align: right;
}
<div class="container">
<div class="wrap">
<div class="image" style="background-image: url('http://placekitten.com/450/300')">
<img src="http://placekitten.com/450/300">
</div>
<div class="caption right">
moar kitty!
moar kitty!
moar kitty!
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="image" style="background-image: url('http://placekitten.com/500/440')">
<img src="http://placekitten.com/500/440">
</div>
<div class="caption">
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
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="image" style="background-image: url('http://placekitten.com/300/440')">
<img src="http://placekitten.com/300/440">
</div>
<div class="caption">
too many kitty..
too many kitty..
too many kitty..
</div>
</div>
</div>
片段演示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.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;
}
}
<div class="container">
<div class="wrap">
<div class="image" style="background-image: url('http://placekitten.com/450/300')">
<img src="http://placekitten.com/450/300">
</div>
<div class="caption-wrap">
<div class="caption right">
moar kitty!
text .. right aligned
</div>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="image" style="background-image: url('http://placekitten.com/500/440')">
<img src="http://placekitten.com/500/440">
</div>
<div class="caption-wrap">
<div class="caption">
have a kitty!!1
have a kitty!!1
text .. left aligned
</div>
</div>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="image" style="background-image: url('http://placekitten.com/300/440')">
<img src="http://placekitten.com/300/440">
</div>
<div class="caption-wrap">
<div class="caption center">
text .. centered
</div>
</div>
</div>
</div>
