使用CSS Transform Scale()模拟Chrome的zoom缩放效果

Hey there, I've worked through this exact scenario before where zoom worked great in Chrome but needed to switch to transform: scale() for broader compatibility. Let's break down how to get the exact same "zoom out" effect for your nested images.

First, let's clarify the core difference between the two properties—this is key to matching the behavior:

• zoom: 0.9 scales both the visual appearance and layout size of your #sub-container (and all its images). The container takes up 90% of its original space in the layout, and images shrink proportionally.
• transform: scale(0.9) only scales the visual appearance by default. The container still occupies its original layout space, which can cause unexpected gaps or shifts if unadjusted.

Solution 1: Visual Scaling Only (Matches Zoom's Look) #

If the layout space of #sub-container doesn't impact other elements (e.g., your #container uses overflow to handle scrolling), you just need two CSS rules to mirror zoom: 0.9 perfectly:

#sub-container {
  transform: scale(0.9);
  transform-origin: top left; /* Critical! Zoom uses top-left as the default origin; scale uses center by default */
}

Setting transform-origin: top left ensures your container doesn't shift position (a common gotcha with default scale behavior), and the scale transform shrinks all images exactly like zoom does.

Solution 2: Match Zoom's Layout Size Changes #

If you need #sub-container to actually take up 90% of its original layout space (just like zoom), adjust its dimensions alongside the scale transform:

For Percentage-Based Container Sizing #

If #sub-container inherits size from #container (e.g., 100% width/height), use this CSS:

#sub-container {
  transform: scale(0.9);
  transform-origin: top left;
  width: 90%; /* Shrink layout width to match scale factor */
  height: 90%; /* Shrink layout height to match scale factor */
}

This makes the container's layout size 90% of its original, while the scale transform shrinks content to match—perfectly replicating zoom: 0.9.

For Content-Sized Container (Images Auto-Fit) #

Since CSS can't calculate original content dimensions natively, use a tiny snippet of JavaScript to adjust the container's size:

const subContainer = document.getElementById('sub-container');
// Capture original size before scaling
const originalWidth = subContainer.offsetWidth;
const originalHeight = subContainer.offsetHeight;

// Apply scale and adjust layout dimensions
subContainer.style.transform = 'scale(0.9)';
subContainer.style.transformOrigin = 'top left';
subContainer.style.width = `${originalWidth * 0.9}px`;
subContainer.style.height = `${originalHeight * 0.9}px`;

This ensures both visual scaling and layout size match exactly what zoom: 0.9 does in Chrome.

Either approach will give you the "zoom out" effect you need, with transform: scale() offering better cross-browser consistency than the non-standard zoom property.

内容的提问来源于stack exchange，提问作者Overload