Beispiel:JS-images-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">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
function analyzeImage (bild) {
document.querySelector('output').textContent =
`Höhe: ${bild.height}px \n` +
`Breite: ${bild.width}px \n` +
`orig. Höhe: ${bild.naturalHeight}px \n` +
`orig. Breite: ${bild.naturalWidth}px \n`;
}
document.querySelector('#auslesen')
.addEventListener('click', function() {
const bild = document.querySelector('img');
analyzeImage(bild);
});
});
</script>
<style>
output {
font-family: courier;
white-space: pre-line;
}
</style>
<title>originale und skalierte Größenangaben</title>
</head>
<body>
<h1>originale und skalierte Größenangaben</h1>
<main>
<img src="https://wiki.selfhtml.org/skins/Selfhtml/images/selfhtml-q-logo-160-wiki.svg" alt="logo" width="200">
<p><output></output></p>
<button id="auslesen">Werte auslesen!</button>
<p>Die ursprüngliche Bildgröße wurde skaliert.<br/>
Mit einem Klick auf den Button können Sie die eigentliche Breite erfahren.
</p>
</main>
</body>
</html>
