html – CSS图像和标题 – 高度100％在一起

2024年1月18日 165次阅读

我的情况是需要在下方显示图像(不重叠).图像的大小和标题的长度都不知道.

整个图形元素的高度需要100％像这样：

《html – CSS图像和标题 – 高度100％在一起》

元素的宽度应该是动态的,由图像比率决定,标题应相应地换行.这很重要,因为我需要彼此相邻显示多个图像.

有什么方法可以用CSS实现这个目标吗？

我尝试使用CSS表,但这不适用于100％的高度.你可以在这看到我的努力：

display: table

http://codepen.io/pju/pen/ZOmdEb

而对于flexbox,它有自己的问题.

display: flex

http://codepen.io/pju/pen/QEJXNZ

最佳答案 我知道使用< video>用于除呈现视频之外的目的的元素是非常无意义的,但奇怪的是,元素的属性海报使其能够比< img>更好地处理图像.您不清楚实际包装器的尺寸与它的环境(即主体,视口或其他包装器？)的关系.

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>
点赞