CSS: can I scale an image including its container?

Question

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.

• Setting top/bottom margins does not work
• there's the 'transform-box:' property that sounds like it should do what I need, but none of the settings make any difference.

Application: CSS Paged Media in Antennahouse Formatter.

Answer 1

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.

Answer 2

Solution #1 using zoom

There is a non-standard zoom CSS property which gives you precisely what you need. Zoom will always scale the whole element, not only its inner contents, and works for any kind of HTML elements: block, inline, replaced elements (images) or text.

img {
  zoom: 75%;
}

Although the specification says that "transform: scale() should be used instead", it also explains that these two properties works differently, as "unlike CSS Transforms, zoom affects the layout size of the element" – which is exactly what you need in your case.

The browser support for zoom is very good. CanIUse states 94.5% support. Note, however, that zoom is really a non-standard property – don't use it on your production sites, although in fact, it is supported by every major browser except Firefox. At the same time, in your setup, where all you need is to print HTML materials (let's say to PDF) by yourself, this should be ideal.

See working JS Fiddle here: https://jsfiddle.net/FurloSK/8bhzkrw2/

EDIT (see comment from OP below)

Solution #2 using transform: scale() with fixed-size container

Well, there is a way to force the image element to scale and also scale its container, but there are two catches:

1. First, it is abusing several CSS properties, and since you are not using a common browser like Chrome, but a specific software (Antennahouse Formatter), I have doubts whether this will actually work for you.
2. Secondly, you will have to manually specify the container size (which kind of defeats the purpose of determining it automatically). Still, I am writing this down here for reference's sake, as it is actually something I am using on a site of my own (a reference page for a computer game) and it is a proper solution to a question "how to scale an image including its container?" – although not practical for your specific case.

HTML code:

<div class="fixedContainer">
  <img class="smallScale" src="https://via.placeholder.com/100"/>
</div>

CSS code:

.fixedContainer {
  display: table-cell;
  position: relative;
  overflow: hidden;
  width: 80px; /* 100px * scale(0.75) = 75px */
  height: 80px; /* 100px * scale(0.75) = 75px */
}
.fixedContainer .smallScale {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

Again, see working JS Fiddle here: https://jsfiddle.net/FurloSK/8bhzkrw2/

Solution #3 Using width property with auto-fit-sized container

This last solution should work for you. Its simple and no ugly hacks are used: you just scale down an image with CSS width using percentage value and set the width of the outer container to match its elements with fit-content. Container will get its size from original image size, therefore giving its nested image element a reference value of what "100%" means, and image can then be scaled by percentage value.

Note that without the fit-content part, div would have no size of its own, and image's percentage width would refer to the whole page – or nearest ancestor with defined width.

HTML code:

<div class="fitContainer">
  <img class="smallWidth" src="https://via.placeholder.com/100" />
</div>

CSS code:

.fitContainer {
  width: fit-content;
}
.fitContainer .smallWidth {
  width: 75%;
}

Finally, see working JS Fiddle here: https://jsfiddle.net/FurloSK/8bhzkrw2/