Beispiel:CSS image-rendering.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype HTML>
<html>
<head>
  <meta charset="utf-8">
  <title><img>-Tag mit image-rendering</title>
<style>
main {
    display: grid;
    grid: "orig scale" auto
          "ctrl scale" 1fr / auto 1fr;
    gap: 1em;
}
.original {
    grid-area: orig;
}
.controls {
    grid-area: ctrl; 
    text-align:right;
}
.controls button {
    width: 8em;
}
figure {
	padding: 0; 
	margin: 0;
}
.scaled {
    grid-area: scale;
}
.scaled img {
	width: 384px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
    const bild = document.querySelector(".scaled img");
    const caption = document.querySelector(".scaled figcaption");
    document.querySelector(".controls").addEventListener("click", function(event) {
        if (event.target.tagName == "BUTTON") {
            // setAttribute verwenden, weil bild.style.imageRendering keine ungültigen Werte annimmt
            bild.setAttribute("style", "image-rendering: " + event.target.value);
            caption.textContent = event.target.value;
        }
    });
});
</script>
</head>

<body>
<h1>Qualität der Bildskalierung</h1>
<main>
<figure class="original">
	<figcaption>Original</figcaption>
    <img src="/images/e/e9/Jaggies.gif">
</figure>
<div class="controls">
    <button type="button" value="auto">auto</button><br>
    <button type="button" value="pixelated">pixelated</button><br>
    <button type="button" value="crisp-edges">crisp-edges</button><br>
    <button type="button" value="smooth">smooth</button><br>
    <button type="button" value="high-quality">high-quality</button>
</div>
<figure class="scaled">
	<figcaption>auto</figcaption>
    <img src="/images/e/e9/Jaggies.gif">
</figure>
</main>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_image-rendering.html&oldid=88091“