SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:CSS-object-fit.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit</title>
<style>
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
figure {
display:inline-block;
}
figure > img {
width: 12em;
aspect-ratio: 4 /3;
border: thin solid #000;
}
figcaption {
font-family: monospace;
}
*, ::before, ::after { box-sizing: border-box }
</style>
</head>
<body>
<h1>object-fit</h1>
<figure>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="fill" />
<figcaption>object-fit: fill</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="contain" />
<figcaption>object-fit: contain</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang"
class="cover" />
<figcaption>object-fit: cover</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang" class="none" />
<figcaption>object-fit: none</figcaption>
</figure>
<figure>
<img src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="Yin Yang"
class="scale-down" />
<figcaption>object-fit: scale-down</figcaption>
</figure>
<p><cite>Quelle: Wikimedia: <a href="https://wiki.selfhtml.org/images/5/54/Landscape.svg">https://commons.wikimedia.org/wiki/File:Mountain_landscape.svg</a></cite>
</p>
</body>
</html>
