Beispiel:CSS-intrinsische-Abmessungen-2.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>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>
<h1>aspect-ratio - Seitenverhältnis festlegen</h1>
<p>Wähle das perfekte Seitenverhältnis:</p>
<div id="controls">
<button class="square">Quadratisch <span>(1:1)</span></button>
<button class="normal">Normal <span>(4: 3)</span></button>
<button class="landscape">Landscape <span>(16:9)</span></button>
<button class="ultrawide">Ultrawide <span>(21:9)</span></button>
</div>
<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>
<p>Zum Tutorial: <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Gr%C3%B6%C3%9Fenangaben">Boxmodell - Größenangaben</a>.</p>
<a href="https://forum.selfhtml.org/advent/2024"><div style="display:grid;grid-template-columns: 63px 1fr; gap:0.5em;"><img src="https://wiki.selfhtml.org/images/a/ad/Selfhtml-nico.png" alt="SELFHTML-Logo mit Adventsmütze" width="63px"><p>Zurück zum <br><b>Adventskalender 2024</b>.</p></div></a>
<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>