I have several images that should spread across both pages in a book. I've hit upon the following css as being (more or less) what I want:
img.illustration.double {
width: 200%;
max-width: none !important; /* For Calibre's ebook viewer. */
margin: 0.5em 0 0.5em 0.5em;
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
While this accomplishes something close to what I want, I really need to apply it only to those images that are rendered as the left/verso page. I am aware that there is an at-rule in css that seems relevant (@page), and that it can even use a pseudo-class to target specific pages.
https://developer.mozilla.org/en-US/docs/Web/CSS/:left
However, it's unclear if this can be used to target specific elements on specific pages.
Is there a way to have css rules apply only on elements that show up on a left page when "Two Pages" viewing mode is enabled?
