Beispiel:CSS-object-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Bilder mit object-position verschieben</title>
<style>
figure {
margin: 0;
}
figure img, figcaption, input {
width: 335px;
max-width: 100%;
margin-bottom: 0.4em;
}
figure img {
height: 335px;
object-fit: cover;
object-position: calc(var(--percentage, 0) * 1%) center;
}
p > img {height: 7em;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const imgElement = document.querySelector('figure img');
const inputElement = document.querySelector('input');
slide();
inputElement.addEventListener('input', slide);
function slide(event)
{
imgElement.style.setProperty('--percentage', inputElement.value);
}
});
</script>
</head>
<body>
<h1>Bilder mit <code>object-position</code> verschieben</h1>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg/1024px-Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg" alt="Panorama Riesengebirge">
<figcaption>Riesengebirge:
Spindlerpass (<i lang="pl">Przełęcz Karkonoska</i>) mit
Spindlerbaude (<i lang="cs">Špindlerova bouda</i>),
rechts <i lang="pl">Schronisko Odrodzenie</i>
</figcaption>
</figure>
<input type="range" value="0" min="0" max="100" aria-label="slider"/>
<p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg/1024px-Prze%C5%82%C4%99cz_Karkonoska_-_panorama.jpg" alt="Panorama Riesengebirge">
</p>
</body>
</html>
