Vertikaler Text bleibt immer der gleiche Abstand von der Seite des Bildes

Question

Ich habe ein Bild mit einigen vertikalen Text geben Kredit auf dem Foto.

Ich möchte sicherstellen, dass der Text immer außerhalb des Bildes bleibt wenn es reaktions wird.

Ich versuche, den Text direkt außerhalb des Bildes und unten rechts im Bild zu setzen.

Hier ist das Snippet

section { 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
} 
 
img { 
 
    width: 93%; 
 
} 
 
.vertical-text { 
 
    transform: rotate(90deg); 
 
    transform-origin: left top 0; 
 
    -webkit-transform: rotate(90deg); 
 
    -webkit-transform-origin: left top 0; 
 
    -moz-transform: rotate(90deg); 
 
    -moz-transform-origin: left top 0; 
 
    float: right; 
 
}

<div class="section"> 
 
    <div class="vertical-text">Photo Credit</div> 
 
    <img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg"> 
 
</div>

Answer 1

Hier gehen, ich denke, das nahe ist.

Beachten Sie die Bildbreitenberechnung. Im Allgemeinen hat der Text eine Zeilenhöhe (die einmal in die Breite gedreht wurde) von 1.2em ... also wenn wir das Bild 100% weniger diesen Betrag machen, sollte immer Platz für den Textblock sein.

.section { 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background: pink; 
 
} 
 

 
img { 
 
    width: calc(100% - 1.2em); 
 
    display: block; 
 
} 
 

 
.img-wrap { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.vertical-text { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    transform: translate(100%, 50%) rotate(90deg); 
 
    transform-origin: top left; 
 

 

 
}

<div class="section"> 
 
    
 
    <div class="img-wrap"> 
 
<div class="vertical-text">Photo Credit</div> 
 
    <img src="http://www.wrestlingwithpopculture.com/wp-content/uploads/2013/03/BRET-HART-06b.jpg"> 
 
    </div> 
 
</div>

JSfiddle Demo

Answer 2

wenn ich richtig verstanden. Sie wollen, dass der Text außerhalb des Bildes nach rechts

-.vertical_text hinzufügen, um diesen width:0%;white-space:nowrap;

EDIT sein:

auf Mobile mit Medien Abfrage der img kleiner machen. 85% statt 93%. das sollte es tun. Sie müssen genügend Platz haben, damit der Text hineinpasst. Sie können auch die Schriftgröße des Textes verkleinern, wenn Sie möchten. aber das Ändern der IMG-Größe sollte genug sein.

Um den Text auf der Unterseite auszurichten, ist es ein bisschen schwierig wegen der Rotation. verwenden diese
bei .section hinzufügen position:relative
bei .vertical_text hinzufügen position:absolute;bottom:68px;right:0
wo bottom:68px die tatsächliche Breite des Textes Sie