nicht angemeldet
Hallo
Ich habe mal ein Beispiel auf einer Testseite erstellt. Leider funktioniert es nicht hundertprozentig. Vielleicht können andere User da noch weiterhelfen. Erst mal der Quellcode:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox mit Bild 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
}
@media all {
.foto-content {
/*width: 80vh;*/
width: 100%;
max-width: 100vh;
height: 60vh;
border: 4px solid hsla(300, 100%, 50%, 1);
display: flex;
justify-content: space-between;
}
.foto-content div {
border: 4px solid hsla(120, 100%, 20%, 1);
display: flex;
align-items: flex-end;
}
.foto-content div p {
font-size: 2rem;
margin: 0 0.5rem;
}
.foto-content figure {
border: 4px solid hsla(16, 100%, 66%, 1);
min-width: 0;
max-width: 100%;
min-height: 0;
margin: 0;
}
img {
display: block;
min-width: 0;
max-width: 100%;
max-height: calc(80vh - 16px);
border: 0;
}
}
</style>
</head>
<body>
<main role="main">
<section class="foto-content">
<div>
<p>◁</p>
</div>
<figure>
<!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/BER-Pictogram.svg/200px-BER-Pictogram.svg.png" alt="Beispielbild"> -->
<img src="https://upload.wikimedia.org/wikipedia/commons/3/37/Swissair-Flugzeug.jpg" alt="Beispielbild">
</figure>
<div>
<p>▷</p>
</div>
</section>
</main>
</body>
</html>
Und kurzzeitig als Beispiel direkt zum Anschauen und testen:
http://boratb.bplaced.net/index1.html
Die Größe und Höhe des umgebenden Containers kann natürlich noch angepasst werden, auch mit anderen Einheiten.
Folgendes Problem bekomme ich nicht gelöst:
Bei senkrechten Bildern ragt das Bild beim Skalieren teilweise unten und oben über den Rahmen hinaus.
http://boratb.bplaced.net/index2.html
einsiedler, es wäre schön wenn du mitteilen würdest, ob mein Beispiel deinen Vorstellungen entspricht und in die richtige Richtung geht. Spiel auch mal etwas mit der Fensterhöhe und Breite rum.
Edith: Jetzt funktioniert es doch auch bei senkrechten Bildern.
Gruss
MrMurphy
Gunnar Bittersmann
Matthias Apsel
JürgenB
Der Martin