Image bleed while preserving the page margins for other content
Not sure if what I am asking is indeed possible, but I've spent (in vain) quite a lot of time trying to make images "bleed" over the page margins (not the actual page size) while preserving the margins for all the other page contents.
The use case is as follows - I am currently creating a user guide for a client that includes interface screenshots. The customer has requested all the screenshots to be full-screen (meaning they include the whole UI and arent't cropped). Fitting a 1080p image on a portrait page while still preserving "readability" is, as you may guess, not the easiest task. Thus, to get a bit more space, I thought of the following:
- All pages are set to standard margins.
- Whenever we have an image, we allow that image to "bleed" over the margins, taking more width and going beyond standard margins - so we can make it larger.
- All the other content stays within margins, obviously.
In theory, looks great, but so far I failed at implementing that miserably. Maybe someone here could drop a hint? Thanks in advance!
Hi!
Did you try to set a width, and negative margins on left and right sides of the image? That’s a common way to get CSS boxes bleeding over page margins.