我有一个响应式幻灯片类型布局，每个图像下方都有标题。
我试图使标题与图像的宽度相同。问题是图像被缩放以垂直适应浏览器，而我的标题是在缩放之前获取图像的宽度。
Fiddle https://jsfiddle.net/601a5uqv/
#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的解决方案。
Update
事实证明我的上述尝试部分适用于 chrome 和 opera，但表现出一些奇怪的行为 https://stackoverflow.com/questions/35097704/make-element-same-width-as-dynamically-sized-image?noredirect=1#comment57917268_35097704。
我还没有发现任何有关该主题的错误报告，但我不禁想知道这是否可能被视为浏览器中的错误。
为了清楚起见，这里简要概述了我的具体要求：
- 标题元素必须与图像具有相同的宽度（如果能够将标题文本左对齐或右对齐到图像的边缘，那就太好了）
- 不得裁剪或拉伸图像
- 图像和标题必须都适合其容器（可能是流体），并使用尽可能多的空间。
- 上述规则适用于任何尺寸的图像
- 仅 CSS（与旧浏览器的兼容性不是主要问题，但它是一个优点）
html 标记can被改变。
Updated
根据您为此问题设置的确切要求，仅使用 CSS 无法解决该问题。
这是我能想到的最好的办法。
小提琴演示 1 https://jsfiddle.net/LGSon/akfhh789/2/（文本固定高度，图像完全可见）
小提琴演示 2 https://jsfiddle.net/LGSon/akfhh789/4/（带有动画的图像顶部的半透明可缩放文本）
我主要使用的技巧是隐藏img来弥补空间，然后background-image以保持比例缩放到最大宽度/高度。
我添加了内联样式background-image为了方便起见，内容可以在 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,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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
