Hallo Leute,
ich bin ganz neu hier - hallo
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 <figure> liegt und responsive reagiert. Dabei möchte ich, dass die Bildunterschrift <figcaption> 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 <img> unten über die Container <figure> und auch <main> (ich habe extra ein sehr großes Bild genommen).
Wie kann ich dem <img > 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 <figcaption> ganz raus genommen. Als ich es wieder einfügte, merkte ich, dass auf einmal die vertikale Zentrierung nach oben verschoben war (das <img> richtete sich an der oberen Kante von <figure> 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.
ich bin ganz neu hier - hallo
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 <figure> liegt und responsive reagiert. Dabei möchte ich, dass die Bildunterschrift <figcaption> 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 <img> unten über die Container <figure> und auch <main> (ich habe extra ein sehr großes Bild genommen).
Wie kann ich dem <img > 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 <figcaption> ganz raus genommen. Als ich es wieder einfügte, merkte ich, dass auf einmal die vertikale Zentrierung nach oben verschoben war (das <img> richtete sich an der oberen Kante von <figure> 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
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>
</head>
<body>
<main>
<figure>
<img src="IMGP7660.jpg" alt="">
<figcaption>2015, Aquarell auf Papier, 32 x 23.7 cm</figcaption>
</figure>
</main>
</html>
