Responsive <img> zusammen mit <figcaption> zentrieren.

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,

ich bin ganz neu hier - hallo :smiley: an alle - erstelle gerade meine erste Website und stelle nun mal meine allererste Frage hier.

Ich möchte in einem zweispaltigen Layout in der rechten Spalte ein Bild von mir zeigen, das vertikal zentriert innerhalb des Containers liegt und responsive reagiert. Dabei möchte ich, dass die Bildunterschrift stets unterhalb des Bildes zu sehen ist.

Mein Problem ist nun, dass das Ganze solange funktioniert, wie das Browserfenster so groß ist, dass das Bild maximal seine volle Höhe erreicht hat. Wenn das Fenster dann breiter wird und damit die container, dann fließt das unten über die Container und auch (ich habe extra ein sehr großes Bild genommen).

Wie kann ich dem sagen, dass es nur maximal so hoch werden soll, wie die Kanten von seinen Containern?

Ich habe das Ganze schon mal hinbekommen, das war nicht besonders schwer. Aber da hatte ich vorher das ganz raus genommen. Als ich es wieder einfügte, merkte ich, dass auf einmal die vertikale Zentrierung nach oben verschoben war (das richtete sich an der oberen Kante von aus), was ich bis heute nicht verstehe. Jedenfalls habe ich dann eine vorläufige Lösung gefunden, mit dem oben beschriebenen Makel.

Ich würde mich sehr freuen, wenn ihr mir helfen könntet. Hier mal der nötigste Code. Vielen Dank schon Mal.

[HTML]

html, body { height: 100%; width: 100%; } 
    body {
        margin: 0;
        padding: 0;
        font-size: 100%;
    }
   
    main {
        border: solid lightgrey 2px;
        float: right;
        width: 59%;
        height: 70%;
        margin-right: 3%;
    }

    figure {
        margin: 0;
        padding: 0;
        max-width: 100%;
        max-height: 100%;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    img {
        max-width: 100%;
        max-height: 100%;
    }

   figcaption {
        font-size: 0.8em;
        padding: 0;
        margin: 0;
    }
</style>
2015, Aquarell auf Papier, 32 x 23.7 cm [/HTML]
2

Also wenn ich dich richtig verstehe, hatte ich das Problem auch schon und bin zu dem Schluss gekommen dass es keine reine CSS Lösung dafür gibt. Hatte es auch auf Stackoverflow gepostet und keine brauchbare Antwort erhalten.

Zwar etwas komplexer aber im Prinzip das selbe:
https://www.html.de/threads/responsive-img-in-zentriertem-div-mit-dynamischer-groesse.54596/

3

Hallo

Hier mal der nötigste Code.

Leider zu wenig. Du schreibst von 2 Spalten, die aber in deinem Quelltext nicht vorkommen. Auch kennen wir dein Bild nicht. Ein Link zu der Seite wäre besser.

Allgemein ist für solche Probleme Flexbox am besten geeignet.

Gruss

MrMurphy

4

Ok, hab ich wohl zu eifrig gekürzt. Danke schon Mal für’s Feedback. Hier mal die frühe Version online, mit provisorischem Bild:
http://jonas-schwendrat.de/Malerei.html

Hat scbawik recht und es gibt keine reine CSS-Lösung?

Flexbox habe ich bisher wenig recherchiert, dachte, dass es noch eine Weile dauert, bis es von den Browsern gut umgesetzt werden kann. Aber ich les mich mal rein.

5

Hallo,

das schaut leider viel schlechter aus als dein zunächst genannter Quellcodeschnipsel.

Auf der Grundlage läßt sich leider kein flexibles oder responsive Design erstellen. Die Lösungen, die wir dir auf Grund des ersten Quellcodeschnipsels erstellt hätten, würden auf der Seite schlicht nicht funktionieren.

Der HTML-Teil muss zur Lösung in Kleinigkeiten überarbeitet werden, sollte für einen gewerblichen oder auch nur seriösen Webauftritt aber zusätzliche Änderungen erfahren.

Das CSS muss komplett überarbeitet werden. Speziell die absolute-, height- und float-Angaben werden falsch / fehlerhaft angewendet und verhindern ein funktionierendes Layout.

Die Frage ist ob du zu solch schwerwiegenden Eingriffen bereit bist. Zumal du dich von einigen Vorstellungen trennen müsstest, wie eine Webseite sachlich korrekt und seriös erstellt wird.

Hat scbawik recht und es gibt keine reine CSS-Lösung?

Doch, es gibt eine reine CSS-Lösung. Allerdings muss wie schon geschrieben das gesamte CSS ineinander greifen.

Gruss

MrMurphy

6

Da bin ich ja gespannt wie du einen vertikal zentrierten, automatisch horizontal und vertikal skalierenden Container mit unbekanntem Inhalt erstellst…
Habe es mit display:flex, display:inline-block und position:relative/absolute jeweils nur im Safari geschafft.
Lasse mich aber gerne eines besseren belehren.

7

Uff! MrMurphy, denk bitte daran, dass das meine allererste Website ist und das auch noch in einem frühen Stadium. In Deinem Post lese ich nur, was alles komplett überarbeitet werden müsste und dass schwerwiegende Eingriffe erforderlich seien. Aber was das für Eingriffe sind, zu denen ich bereit sein müsste, das lese ich nicht und kann es eben darum auch gar nicht verstehen.

Ich musste auch erst mal ein paar Stunden warten und habe heute auch nicht mehr an der Seite weiter gearbeitet, weil mich Deine starke Kritik doch sehr verunsichert.

Daher meine Bitte: Falls Du noch einmal etwas antworten solltest, und falls Du noch einmal über etwas schreibst, was Deiner Ansicht nach nicht funktioniert, könntest Du dann bitte zumindest andeuten, wie es denn funktionieren könnte, bzw. was geändert werden könnte. Denn negativ kritisieren kann jeder, erst recht bei einem absoluten Anfänger, wie mir. Nur habe ich dann eben echt keinen Spaß daran, hier was zu posten.

8

Probier mal. Keine Ahnung ob du es vielleicht so möchtest.

<!DOCTYPE html>
<html
><head>
<meta charset="UTF-8">
<title>Vertikal zentrieren mit :after oder :before</title>
<style>
* {
 margin:0;
 padding:0;
}

html, body , #col2 {
 height: 100%;
}

body {
 text-align:center;
}
#col1 {
 float:left;
 width:20%;
 background:#eee;
 min-height:100%;
}

#col2 {
 margin-left:20%;
 background:#ada;
}
#col2:after  {
 content:"";
 display:inline-block;
 vertical-align:middle;
 height:100%;
}
figure {
 padding:10px 10px 2em 10px;
 display:inline-block;
 border:1px solid #000;
 vertical-align:middle;
 width:60%;
 height:80%;
}

img { height:100%;width:100%}

</style>
</head>

<body>

<div id="col1">Links</div>
<div id="col2">
<figure>
  <img src="bild.jpg" alt="" title="Bild" width="570">
  <figcaption>Beschreibung</figcaption>
</figure>
</div>

</body></html>
9

Hm, danke schon Mal, das ist schon ziemlich cool. Der einzige Haken ist, dass das Bild sich immer über den gesamten Container streckt, also verzerrt wird. Wenn ich es dann beim img mit max-height, oder max-width versuche, hängt das Bild am oberen Rand und das war’s dann mit der Zentrierung.

Und ich hab mal nach dem :after recherchiert, verstehe aber immer noch nicht, warum Du das gemacht hast. Bin neugierig, könntest Du das kurz erklären?

1000 Dank!

10

Lass mal bei figure das height weg. Dann sollte es besser funktionieren.
Dieses Pseudoelement dient zum vertikalen Zentrieren. Damit du es besser verstehst, kannst du #col2:after noch zusätzlich eine Breite von 10px und eine Hintergrundfarbe angeben.

11

Bor, super! Funktioniert einwandfrei. Danke, danke, danke, jetzt haste mich echt glücklich gemacht! Und aus Deiner Lösung kann ich auch ne Menge lernen. Ach, toll!