Bild in Tabelle mittig vergrößern

  • Hallo,

    ich bin ziemlich unerfahren, was HMTL angeht, aber ich versuche gerade in einer Tabelle ein Bild einzufügen.

    Das funktioniert mit folgendem Code auch einwandfrei.


    Code
    <td align="center" class="anfahrt" rowspan="12"><div class="anfahrtsbild"><img src='routenmap.png' height=100%></div></td>


    Auch dass es in der Höhe an die vorgegebene Tabellen höhe angepasst wird klappt.


    Da jedoch die Tabelle schmäler ist, als das "vergrößerte" Bild hätte ich gerne, dass das Bild mittig "gezoomt" wird.

    Kann mir hier jemand helfen?


    All meine Recherchen verliefen leider im Sande, weil es meist nur um die Anordnung des Bildes in der Tabelle geht, was ich mit align="center" ja bereits mittig habe, das hat aber nichts damit zu tun wie das Bild abgeschnitten wird.


    Viele Grüße und schon jetzt vielen Dank

  • Warum in einer Tabelle?

    Grundsätzlich sollte das klappen, wenn man das Bild in einem Container hat und das Bild auf width:100%; setzt. Ggfl. noch max-width setzen, damit es nicht zu groß gezoomt wird. In einer Tabelle habe ich das allerdings noch nie probiert, daher musst Du das mal selber testen oder Dich von der Tabelle trennen.

  • Ein paar mehr Informationen wären zielführend. Wie ist die Tabelle in ihrer Gesamtheit aufgebaut... welche Formate verbergen sich hinter den verwendeten Klassen... was soll man unter '...dass das Bild mittig "gezoomt" wird...' verstehen?

    Grundsätzlich ist jedoch die Verwendung einer Tabelle immer problematisch, man soll sie auch nur benutzen, wenn tatsächlich tabellarische Daten dargestellt werden sollen. Es gibt durchaus mit HTML und CSS bessere Möglichkeiten (zB FlexBox oder Grid Layout), um deine Problem zu lösen.

    Des weiteren fällt mir auf, dass du wohl auf einem älteren Stand in Sachen HTML bist. Die aktuelle Variante ist HTML5 und dort ist zB deine Tag-Ergänzung 'align="center" ' als veraltet eingestuft und sollte durch CSS formatiert werden. Hmmm... nebenbei... so wie es dort steht ist es meiner Meinung nach sowieso nicht wirksam, denn es zentriert zwar den Inhalt des <td> (also das <div>) aber nicht den Inhalt des <div> (also das <img>).

    Ebenso dein 'height=100%' Attribut. Dieses ist zwar noch zulässig in HTML5, allerdings glaube ich, dass die Prozent (%) Einheit nicht zulässig ist, sondern nur Pixel (px). Und wenn, dann sollte bei der Tag Ergänzung gar keine Einheit stehen, sondern nur height="200"... was dann 200px wären.

    Also bitte.. poste den vollständigen Code (HTML und CSS), beschreibe, was du tatsächlich erreichen willst und dann wird sich hier bestimmt jemand finden, der dir den richtigen Weg zum Ziel weist.

  • Wenn ich das richtig verstehe, möchtest Du, dass das Bild mittig ist und die Tabellenzelle ganz ausfüllt. Und bist bereit zu akzeptieren, dass dann etwas abgeschnitten wird. Dann wäre es am einfachsten, wenn Du das Bild als Hintergrund anlegen würdest. Informiere dich hier und konzentriere dich auf background-size: cover;:

    https://wiki.selfhtml.org/wiki…d_-bilder/background-size

    Würde aber auch mit object-fit gehen, siehe hier:

    https://wiki.selfhtml.org/wiki…ige/object-fit#object-fit

  • um das Problem etwas näher zu beschreiben:

    ich betreibe in meiner Feuerwehr einen so genannten Alarmmonitor. Dieser verfügt über die Möglichkeit eine Alarmdepeche zu drucken. Hierzu dient eine HTML-Datei als Basis (ist vom Entwickler so vorgegeben).

    Ich habe auf meine laienhafte Art und Weise versucht das für uns anzupassen.

    So soll (siehe Anhang) z.B. die Anfahrt in einem Feld der Tabelle eingefügt werden.

    Das hierzu verwendete Bild ist auch im Format leider so vorgegeben. Wie Sempervivum richtig interpretiert hat, möchte ich dass das Bild in der Höhe die Zelle voll ausfüllt und ich würde akzeptieren, dass hierzu links und rechts was abgeschnitten wird.

    Ich füge euch den HTML-Code und das Bild mal ein, vielleicht ist es dann verständlicher.


  • CSS:

    Code
                div.anfahrtsbild {
                    width: 470px;
                    height: 650px;
                    overflow: hidden;
                    background-image: url(routenmap.png);
                    background-size: cover;
                    background-position: center center;
                }

    Im HTML kannst Du dann das Bild weg lassen:

    Code
                         <tr height="25">
                            <td align="center" class="anfahrt" rowspan="12">
                                <div class="anfahrtsbild"></div>
                            </td>
                        </tr>

    Es fällt auf, dass Du eine feste Größe für das Div angegeben hast und dass es deshalb nicht responsiv ist. Aber ich nehme an, dass Du es für deinen Monitor so eingerichtet hast.

  • Das wäre möglich aber zunächst kannst Du es einfach in dem CSS ändern, das Du jetzt hast, d. h. dieses:

    Code
    div.anfahrtsbild {width: 470px; height: 650px; overflow: hidden;}

    durch das ersetzen, das ich vorhin gepostet habe.

  • Jetzt zeigt es mir das ganze am Bildschirm schon mal richtig an.

    Allerdings wird mir das Bild nicht gedruckt. Genauso wie die vordefinierten Balken, die ich grau angelegt hatte, werden auch weiß gedruckt.

    Weißt Du zufällig wo hier noch der Hase begraben sein könnte?

  • Ich kenne das von meinem Browser, dass man das Drucken der Hintergrundbilder ausschalten kann um Tinte/Toner zu sparen. Sieh mal nach, ob Du das in deinem Browser auch findest. Wenn nicht, müssen wir statt des Hintergrundbildes ein img-Tag nehmen und object-fit.

  • Hallo,

    leider konnte ich das beim mir im Browser nicht entsprechend ändern. Nach sämtlichen Versuchen werden die Hintergründe leider doch nicht gedruckt.


    Den Passus

    Code
    @media print { 

    habe ich jetzt gelöscht. Nicht dass man mal was vergisst beim anderen zu ändern.

  • Hast Du genau in den Einstellungen des Drucken-Dialoges nachgesehen?


    Wenn es nicht geht, können wir immer noch ein img-Tag mit object-fit verwenden.

    Code
                        <tr height="25">
                            <td align="center" class="anfahrt" rowspan="12">
                                <div class="anfahrtsbild">
                                    <img src="routenmap.png">
                                </div>
                            </td>
                        </tr>
  • Ich hab jetzt mal noch versucht den Code im Ganzen etwas zu vereinfachen und übersichtlicher zu machen.

    Ob das aus programmiertechnischer Sicht so alles astrein ist weiß ich nicht.

    Irgendwie funktioniert es aber.

    Vielen Dank für Eure Hilfe


Jetzt mitmachen!

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