Beispiel:CSS-intrinsische-Abmessungen-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-intrinsische-Abmessungen-2.html&oldid=100342“