csscss-paged-media

CSS: can I scale an image including its container?


I've got a section of text, with an image in between paragraphs.

<p class="bodytext">aslkjfsdlkfj f ldflskl</p>
<p class="image"><img src=1.png/></p>
<p class="bodytext">aslkjfsdlkfj f ldflskl</p>

The image dimensions are not specified in the HTML, they're read from the image. I want to use CSS to scale the image:

img {
    transform: scale(0.7);
}

However, this only scales the image and not the box that contains it, so I get a huge gap between the text and image. I want to get rid of this gap.

Application: CSS Paged Media in Antennahouse Formatter.


Solution

  • This Antennahouse Formatter-specific instruction will scale an image including its container:

    img {
    -ah-content-width: 70%;
    }
    

    You can also use -ah-content-height, scaling is proportional by default.

    This was designed to match behavior in XSLFO: it will scale the image to n% of the image's intrinsic size.