Could use some assistance figuring out what's missing here.
I've added a random photo from Wiki, similar in size to the images I'll be working with. The images will vary in size, but I want them to always remain visible within the browser window after rotation, even if part of the image is pushed outside the viewable area. It's almost there, just need to address the partial overflow issue.
Any ideas on how to resolve this?
Thanks,
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: auto;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img id="rotater" onclick="rotate(this)" src="https://upload.wikimedia.org/wikipedia/en/6/6c/Us_flag_large_38_stars.png" style="transform: rotate(0deg)">
<script type="text/javascript">
let rotateAngle = 90;
function rotate(image) {
image.setAttribute("style", "transform: rotate(" + rotateAngle + "deg)");
rotateAngle = rotateAngle + 90;
}
</script>
<div class="as-console-wrapper">
<div class="as-console"></div>
</div>
</body>
</html>