我有一个figure
标记,其中包含一个img
和figcaption
。
我正在尝试使figcaption
的宽度与figure
的高度相匹配(这是根据窗口大小而变化的,在中您可能会使用vh
来匹配浏览器的高度。原因是我将figcaption
旋转90度,并希望figcaption
文本以图形的高度为中心。
Fiddle
HTML
<figure>
<img src="http://placehold.it/350x150">
<figcaption>Title</figcaption>
</figure>
CSS
figure {
padding:20px;
display:block;
background:#ffa2df;
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figcaption {
transform: rotate(-90deg);
transform-origin: 0 0;
text-align: center;
background: red;
position: absolute;
width: 100%;
height: 20px;
display:flex;
flex-direction: column;
float:left;
}
这可以使用绝对定位,并使内部旋转元素也绝对定位。
可以说,这也是一个拼凑,但高度是有响应的,尽管文本没有中断。。在那里将需要媒体查询。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
figure {
padding: 20px;
display: block;
background: #ffa2df;
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figcaption {
background: red;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 2em;
}
figcaption span {
position: absolute;
bottom: 0;
left: 0;
white-space: nowrap;
padding: 0 1em;
line-height: 2em;
transform-origin: top left;
transform: translate(0%, 100%) rotate(-90deg);
color: white;
}
<figure>
<img src="http://placehold.it/350x150" />
<figcaption><span>Lorem ipsum dolor sit amet</span>
</figcaption>
</figure>
备选方案:实验属性-写入模式@MDN
书写模式属性定义文本行是水平排列还是垂直排列,以及阻止进度的方向。
这个反应灵敏
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
figure {
padding: 20px;
display: block;
background: #ffa2df;
position: relative;
}
figure img {
width: 100%;
height: auto;
}
figcaption {
background: red;
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: .5em;
writing-mode: vertical-lr;
text-align: center;
color: white;
}
<figure>
<img src="http://placehold.it/350x150" />
<figcaption>Lorem ipsum dolor sit amet
</figcaption>
</figure>
也许有点草率,但这会奏效。把图形变成一个表格,保持figcaption的方向,并在里面放一个div来旋转。
figure {
display:table;
padding:20px;
background:#ffa2df;
direction:rtl;
}
figure img {
display:table-cell;
vertical-align:top;
width: 100%;
height: auto;
}
figcaption {
display:table-cell;
vertical-align:middle;
width:20px; max-width:20px;
background: red;
}
figcaption div {
transform: rotate(-90deg);
transform-origin: 25% 25%;
}
<figure>
<img src="http://placehold.it/350x150">
<figcaption><div>Title</div></figcaption>
</figure>
如果有更好的答案,我很乐意删除这个!