How do I fit three frame newspaper cartoons (like Garfield or Peanuts) that fit fine on desktop, on mobile?

[doctorbadger]

Both a html slideshow and embedding google slides, would work but would mean cropping each frame separately, and therefore I would need to have different image files for desktop and mobile view. I would prefer a slideshow which displayed the full width image on the desktop screen (and hence would not need the viewer to press anything), and which displayed only a third of the image on the mobile screen, so the viewer could just scroll right to see the rest of the same image, and not to scroll onto a new image, as is usually the case. 

 

This would mean I wouldn't have to crop all the frames, and wouldn't need to load images for desktop browsers and different images for mobile browsers, but the experience would be the same for users. 

[Ingolme]

A simple solution would be to allow horizontal scrolling on the container and then make the image size larger on small screens.

For this to work, each comic panel needs be within a third of the width of the image. Different spacing between the panels might cause them to not line up perfectly.

HTML:

<div class="strip">
  <img src="comic-strip.png" alt="Comic strip">
</div>

CSS:

.strip { overflow: auto; }
.strip img { display: block; width: 100%; }
@media screen and (max-width:768px) {
  .strip-img { width: 300%; }
}