nicht angemeldet
Du hast recht, aber Gunnar Bittersmann schreibt dazu:
Das ist falsch.
Browser kennen bei (richtig) gesetzten width- und height-Attributen das Seitenverhältnis des Bilds, bevor dieses geladen ist, und reservieren (auch bei responsiven Bildern) den entsprechenden Platz, sodass nach dem Laden des Bilds kein erneuter Seitenaufbau nötig ist.
Ist also so gut wie immer sinnvoll, width und height anzugeben.
Grundsätzlich ist nicht vorgesehen ein Bild über seine reale Größe hinaus mittels CSS zu vergrößern. Das zerstört schlicht jedes Layout.
Um überhaupt mal zu einem Ergebnis zu kommen habe ich mal eine komplette Seite erstellt. Schriften, Farben, Ränder, Abstände, ... können natürlich noch angepasst werden:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
min-width: 1px;
}
html {
}
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-rows: 100px 1fr 100px;
}
header {
background-color: antiquewhite;
display: flex;
justify-content: flex-end;
align-items: center;
}
header h1 {
font-size: 40px;
padding: 20px;
margin: 0;
}
main {
background-color: dodgerblue;
}
main div {
background-color: gold;
width: 100%;
height: 100%;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
main img {
min-width: 1px;
max-width: 100%;
max-height: calc(100vh - 220px);
padding: 13px;
border: 2px solid red;
}
footer {
background-color: antiquewhite;
padding: 10px 20px;
display: flex;
justify-content: center;
align-items: center;
}
footer>* {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>Blindtext</h1>
</header>
<main>
<div>
<img src="https://via.placeholder.com/2100x1200?text=Platzhalterbild" alt="Platzhalterbild">
</div>
</main>
<footer>
<p>Kurzer Text</p>
</footer>
</body>
</html>
Für die üblichen Kritiker: Dass das schlechtes HTML ist ist klar. Es geht erst mal nur um die Darstellung.
Rolf B
Henry
Matthias Apsel
Tabellenkalk
Gunnar Bittersmann