Quiz

The image above is very wide. To see it in full, you have to scroll from left to right. On a desktop computer, this is not a problem. On a small screen, for example that of a smart phone, you can also scroll from left to right, but the entire page may scroll, not just the image.

The code for the image above is as follows:

<img src="imageURL" style="border:12px solid #75623c;">

Below, the same image is enclosed in a div element which allows side scrolling and whose width is adjusted according to that of the window. Thus, on a smart phone, the image can be scrolled inside the screen width, without the rest of the page scrolling sideways.

To appreciate the difference between the scrolling of these two images, view the current page on your phone.

The code for the image above is as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    var window_width = window.innerWidth;
    var image_offset = $("#divid").offset();
    responsive_width = window_width - image_offset.left - 30;
    $("#divid").css("max-width", responsive_width);
});
</script>
<div id="divid" style="overflow-x:scroll;border:12px solid #75623c;">
    <img src="imageURL">
</div>

Of course, the border (border:12px solid #75623c;) is not necessary. I put it on just so you can see the difference between the two images.

See the example live at https://moodleformulas.org/course/view.php?id=77§ion=69 ↗.