Log in / Register

Forum › How do I...?

how to make images wider (125%) in pdf?

deadcoder0904
i have this css:

@page {
    size: 6.6in 8.5in;
    margin: 70pt 60pt;
}

img {
   width: 125%;
}


this makes the image grow only on the right side.

i am unable to make it centered.

all i want is a half-bleed layout (see the first image here for half-bleed → https://www.joshwcomeau.com/css/full-bleed/)

full-bleed layout means 100% width of pdf. half-bleed (i made that up) means having a little margin on either side.

all i want is the image to be centered & overflow little to right & left.

is this possible? i checked the forum. nothing relevant showed up.
howcome
You may want to extend your search scope; it's quite easy to find discussions on this topic, e.g.:

https://stackoverflow.com/questions/3300660/how-do-i-center-an-image-if-its-wider-than-its-container

If you set the width yourself, a simpler solution will do:
<html>
<style>
@page {
    size: 6.6in 8.5in;
    margin: 70pt 60pt;
}
body { background: yellow }
div {
   background: red;
   width: 110%;
   margin-left: -5%;
}
</style>
<body>
<div>foo</div>
</html>
deadcoder0904
i know css well so i already tried your solution. hence, the question.

for some weird reason, it goes outside the pdf only on the right side.

img {
    background: red;
    width: 125%;
    margin-left: -5%;
    margin-right: -5%;
  }


full repro → https://github.com/deadcoder0904/princexml-playground/
  1. index.css‎ 3.9 kB
  2. index.html‎ 1.2 kB
  3. index.pdf‎ 828.6 kB
deadcoder0904
so regular `img` didn't work for some reason but `figure` worked.

i used `figure` because i saw the output html from iawriter used it.

this is the tailwind css code.

figure {
    @apply flex flex-col justify-center items-center py-6;

    & > img {
      @apply m-4 w-[125%];
    }

    & > figcaption {
      color: theme('colors.gray.700');
      @apply text-xs italic pt-4;
    }
  }


the commit that changed it to see the expanded css → https://github.com/deadcoder0904/princexml-playground/commit/6babd283cf9e2d43c5a80cdc803cbe179f34f9fd