旋轉的文字與圖像外部的左上角對齊？

我想知道將圖片的左上角直接放置旋轉文字的最有效方法是什麼？請記住，如果文本框的高度與圖像的高度對齊，並且圖像比例會變化（高圖像，短圖像，寬圖像等），我希望它可以使用。旋轉的文字與圖像外部的左上角對齊？

這是一個我想實現的目標： enter image description here

我該怎麼做？先謝謝你！

哎呀，忘了添加jsfiddle。你可以查看它here!

.image.information { 
 
    display:block; 
 
    position:absolute; 
 
    margin:0; 
 
    top:45%; 
 
    left:100%; 
 
    height:100%; 
 
    -webkit-transition:all 250ms linear; 
 
    -o-transition:all 250ms linear; 
 
    transition:all 250ms linear; 
 
    transform:rotate(-90deg); 
 
    -webkit-transform:rotate(-90deg); 
 
    -moz-transform:rotate(-90deg); 
 
    -ms-transform:rotate(-90deg); 
 
    -o-transform:rotate(-90deg); 
 
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
} 
 
.image-wrap { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.image-inner img { 
 
    width: 500px; 
 
    height: auto; 
 
    display: block; 
 
}

<div class="image-wrap"> 
 
    <img class="image-inner" src="http://i.stack.imgur.com/YyMHW.jpg" alt="" /> 
 
    <div class="image information"> 
 
    information<br/> 
 
    informa<br/> 
 
    info 
 
    </div> 
 
</div>

來源

2014-11-22 kenhimself

絕對定位將對您有所幫助。但我會將它包含在圖片本身中而不是文本中，因爲它是圖片的一部分。 – 2014-11-22 17:42:39

哎呀！抱歉的人，繼承人jsfiddle：http://jsfiddle.net/kenhimself/sx6mem8j/ – kenhimself 2014-11-22 17:51:18

這是可能的使用CSS3轉換，但需要在你的DOM額外的元素：

<div class="image-wrap"> 
    <img class="image-inner" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/08/korea5b.jpg" alt="" /> 
    <div class="image information"> 
     <div class="info-inner"> 
     information 
     <br/>informa 
     <br/>info 
     </div> 
    </div> 
</div>

現在一些絕對定位魔術：

.image.information { 
    position:absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 75px; 
    background: #ccc; 
} 
.info-inner { 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top:-75px; 
    margin-left: -75px; 
    height:55px; 
    width: 150px; 
    vertical-align: bottom; 
    transform: rotate(90deg); 
} 
.image-wrap { 
    height: 100%; 
    width: 100%; 
    position: relative; 
} 
img.image-inner { 
    width: 300px; 
    margin-left: 75px; 
}

請注意，沒有簡單的方法讓垂直居中文本沒有指定明確的文本高度。在這種情況下，我選擇了55px。它會拉伸以匹配您指定的任何圖像的高度。

JSFiddle：http://jsfiddle.net/zephod/ckqcLsbv/2/

來源

2014-11-22 17:44:15

旋轉的文字與圖像外部的左上角對齊？

回答

相關問題