Keep pressing the buttons to see how the image height changes.
Return to tutorial on Image Height
Complete source
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Change image height with JavaScript</title></head>
<body>
<button type="button" id="expand">Expand</button>
<button type="button" id="compress">Compress</button>
<img src="images/help.jpg" id="i1" alt="Help illustration">
<script>
const image = document.getElementById('i1');
const expand = document.getElementById('expand');
const compress = document.getElementById('compress');
function resizeHeight(direction) {
let height = image.height;
if (direction === 'up' && height < 300) height *= 2;
if (direction === 'down' && height > 5) height = Math.max(5, Math.round(height / 2));
image.height = height;
}
expand.addEventListener('click', () => resizeHeight('up'));
compress.addEventListener('click', () => resizeHeight('down'));
</script>
</body>
</html>