Solution #1 using zoom
One effective method is utilizing the non-standard zoom CSS property, which provides the desired functionality. The zoom property will scale the entire element, including its contents, and can be applied to various types of HTML elements: block, inline, replaced elements (images), or text.
img {
zoom: 75%;
}
Despite specifications recommending the use of "transform: scale() instead", it's worth noting that the two properties function differently, with "zoom impacting the layout size of the element" - precisely what is needed in this scenario.
The browser support for the zoom attribute is robust, as indicated by CanIUse's report of 94.5% support. It should be noted that while zoom is a non-standard feature, avoid employing it on production sites; nonetheless, major browsers (with the exception of Firefox) do support it. For situations like generating HTML materials for printing purposes (e.g., PDFs), this solution works well.
View the functioning JS Fiddle here: https://jsfiddle.net/FurloSK/8bhzkrw2/
EDIT (Refer to comment from OP below)
Solution #2 utilizing transform: scale() with fixed-size container
There exists a technique to enforce scaling on both the image element and its container, albeit with certain considerations:
- Primarily, it involves manipulating multiple CSS attributes, a practice that might not yield intended results when dealing with specific software (Antennahouse Formatter) rather than common browsers like Chrome.
- Secondly, specifying the container size manually is necessary, potentially contradicting the objective of automatic determination. Nonetheless, I'm outlining this approach for reference, acknowledging its applicability to questions regarding scaling images within containers although impractical in the current context.
HTML snippet:
<div class="fixedContainer">
<img class="smallScale" src="https://via.placeholder.com/100"/>
</div>
CSS snippet:
.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;
}
Take a look at the functional JS Fiddle here: https://jsfiddle.net/FurloSK/8bhzkrw2/
Solution #3 Applying width property with auto-fit-sized container
This alternative approach appears promising, free from cumbersome hacks. By resizing an image via CSS width using a percentage value and aligning the outer container's width to match its elements through fit-content, the container adapts based on the original image dimensions. Consequently, the nested image element gains a reference point for interpreting "100%," allowing proportional scaling.
Note that without fit-content, the div would lack individual sizing, causing the image's percentage width to refer to the entire page or the closest ancestor with a 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%;
}
For a demonstration, visit the operational JS Fiddle: https://jsfiddle.net/FurloSK/8bhzkrw2/