Text über ein Bild blenden und relativ zum Bild positionieren

    Hallo,

    ich habe hier ein nicht rechteckiges Bild, das in der Mitte "länger" ist als an den Seiten. In diesem freien Bereich an den Seiten soll Text eingeblendet werden. Der Text müsste also relativ zur linken oberen Ecke des Bildes positioniert werden und darf eine bestimmte Breite (beim linken Text ca. 40%) der Bildbreite nicht überschreiten. Ich bin hier gerade etwas überfordert. Jemand eine Idee?

    Ich hab noch gar nichts gemacht. Es geht auch nicht um eine Internetseite, es geht um ein eBook (epub), da wird auch HTML eingesetzt.

    Weil die Frage "Text über Bild positionieren" nicht zum ersten Mal gestellt wird, habe ich dazu früher Mal eine Demo gemacht:

    https://jsfiddle.net/Sempervivum/k84scz1a/25/

    Für deinen Fall mit den zwei Textblöcken braucht es eine kleine Erweiterung, es würde sich anbieten, die Variante 1 zu verwenden und die Texte mit Flexlayout links und rechts auszurichten. Du müsstest überprüfen, ob deine Software für die Gestaltung des Buches Flex unterstützt.

    Ich hab das jetzt so umgesetzt

    Code
    <figure style="position:relative;">
<img src="main-46.jpg" alt=""/>
<figcaption style="position:absolute;top:85%;left:40%;width:60%;">Text</figcaption>
</figure>

    Das ist erstmal ein Bs. mit nur einem Textblock, den anderen teste ich später. Kann das auch so machen, dass die Schrift kleiner dargestellt wird, wenn das Bild kleiner dargestellt wird statt den Text auf mehr Zeilen zu verteilen? Zum Bsp. wenn der Textblock eine gewissen Höhe unterschreitet (sprich: unten aus dem Bild herausragen würde)?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden