Beispiel:CSS-intrinsische-Abmessungen-2.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>aspect-ratio</title> <style>
figure { width: 38.5em; padding: 0.5em; margin: 2em 0; border: thin solid; }
figure > img { width: 100%; object-fit: cover; }
figcaption { text-align: center; }
- controls {
button { height: 6rem; } span {display:block; font-weight: bold;} } .square { aspect-ratio: 1 / 1; object-position: 55% 0; } .normal { aspect-ratio: 4 / 3; } .landscape { aspect-ratio: 16 / 9; object-position: 60% 0; } .ultrawide {
aspect-ratio: 21 / 9;
}
</style>
</head>
<body>
aspect-ratio - Seitenverhältnis festlegen
Wähle das perfekte Seitenverhältnis:
<button class="square">Quadratisch (1:1)</button> <button class="normal">Normal (4: 3)</button> <button class="landscape">Landscape (16:9)</button> <button class="ultrawide">Ultrawide (21:9)</button>
<figure>
<img class="normal" src="https://wiki.selfhtml.org/images/5/54/Landscape.svg" alt="landscape of Toscana"> <figcaption>Dolce Vita in der Toskana</figcaption>
</figure>
Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Gr%C3%B6%C3%9Fenangaben">Boxmodell - Größenangaben</a>.
<a href="https://forum.selfhtml.org/advent/2024">Zurück zum
Adventskalender 2024.
<script> document.addEventListener('DOMContentLoaded', function () {
const controls = document.getElementById('controls');
const image = document.querySelector('img');
controls.addEventListener('click', function (event) {
const clickedButton = event.target.closest('button');
if (clickedButton) {
image.classList.remove('square', 'normal', 'landscape', 'ultrawide');
const newClass = clickedButton.classList[0];
image.classList.add(newClass);
}
});
}); </script>
</body> </html>
