我有一种情况,需要在图像下方显示标题(不重叠)。图片的大小和说明的长度都未知。
整个图形元素的高度需要像这样100%:
元素的宽度应该是动态的,由图像比例决定,标题应该相应地换行。这很重要,因为我需要并排显示多张图片。
有什么办法可以只用 CSS 实现吗?
我试过使用 CSS 表格,但这不适用于 100% 高度。你可以在这里看到我的努力:
display: table
http://codepen.io/pju/pen/ZOmdEb
还有 flexbox,它有自己的问题。
display: flex
最佳答案
我知道使用 <video>
用于呈现视频以外目的的元素非常不符合语义,但奇怪的是该元素的属性 poster
使它能够比 <img>
更好地处理图像.您不清楚实际包装器的尺寸及其与其环境的关系(即主体、视口(viewport)或其他包装器?)。
html,
body {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
background: #000;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.box {
display: table;
}
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: auto;
overflow: hidden;
display: table-row;
}
.image {
height: auto;
width: 100%;
}
.title {
font-size: 1.3em;
font-family: 'Raleway';
font-variant: small-caps;
line-height: 1.15;
text-align: center;
background: rgba(221, 126, 110, .2);
color: #EFEFEF;
}
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<section class='box'>
<figure class='frame'>
<video class='image' poster='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'></video>
<figcaption class='title'>Lena Söderberg 1972</figcaption>
</figure>
</section>
关于html - CSS 图像和标题 - 高度一起为 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38859508/