Responsive Bild mit zentrierter Schrift vertical und horizontal... wie in css gestalten?

  • Hi,


    ich würde gerne ein Bild auf der Seite haben, das von Text umflossen werden soll. Das Bild hat zwar 480 auf 640 Pixel, ist also 3:4 von der Größe her, aber es soll responsive sein, sich also anpassen, gerne auch bis es effektiv nicht mehr erkennbar ist.


    Dann würde ich gerne etwas auf das Bild schreiben, mittig vertikal wie horizontal.


    Also hab ich bissi rumprobiert und geforscht, aber irgendwie komme ich nicht zum gewünschten Ergebnis.


    hier mal der bisherige Code


    css


    #bildrechts {

    float: right;

    background: url(../img/bild.jpg) no-repeat center;

    background-size: cover;

    margin-right: 2em;

    width: 24vw;

    height: 32vh;

    text-align: center;

    vertical-align: middle;

    font-size: 2em;

    font-variant: small-caps;

    font-weight: bold;

    font-style:italic;

    color:#fff;

    }


    in html


    <div id="bildrechts">das ist mein Text</div>



    hmmm... was funktioniert ist, dass das Bild als Hintergrundbild kommt, allerdings nicht in der Größe in der ichs gerne hätte und der Text kommt ist aber nicht vertikal mittig.


    Mit dem Bild, das leuchtet mir ein, klappt das nie mit height:32vh weil ja das Display sich ändert. Ich hab also auch schon width fixe größe und height 100% und auto ausprobiert, damit das bild hat so hoch wird, dass es voll angezeigt wird, abhängig von der vorgegeben Breite. Aber auch das will nicht klappen.


    Irgendwie streckt das bissi der Wurm drin und ich will und will nicht drauf kommen.


    Weiß jemand Rat? :)

  • Für deinen Anwendungsfall wäre vermutlich ein normales Bild per img-Tag besser.


    Das responsive Verhalten bekommst du dann per

    Code
    img {
        width: 30%;
        height: auto;
    }

    hin. Die Werte müsstest du natürlich noch an deine Bedürfnisse anpassen. Das auto muss allerdings bleiben, damit das Bild nicht verzerrt wird.


    Den Text kannst du dann z.B. mit Flexbox oder absoluter Positionierung inkl. transform: translate() zentrieren.

  • Hey, super, danke Mr. Murphy, muss ich mir unbedingt morgen mit dem Editor ansehen und bei mir umsetzen. :)


    Grad kann ich mir leider nur den Code ansehen, aber ich kann glaube ich meine Mängel bereits erkennen. :)


    Dir auch lieben Dank JR :)


    Gunni

  • Nochmal vielen lieben Dank Mr. Murphy. Klappt super. Hab einiges dazu gelernt :)


    Langsam machts wieder Spaß. :) Ich hab inzwischen einiges aufgeholt, aufgefrischt und dazu gelernt und da macht es richtig Spaß, wenn sich die Bausteine plötzlich zusammenfügen und man wieder was macht und sich an das hinarbeiten kann was man will und man nicht ständig an nem Punkt ist wo man eine Änderung vornimmt und die einfach nicht passiert und man verzweifelt ständig darüber, dass es einfach nicht geht ohne zu wissen warum...


    Danke nochmal :)


    Gruß


    Gunni

Jetzt mitmachen!

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