使用 CSS 缩放孩子以适应父母

Question

是否可以缩放一个孩子（已知大小）以匹配其父母（未知宽度）的宽度？

孩子的尺寸会比它的父母更宽。 我需要找到一种方法来缩小它，以便它在父级的范围内显示整个子级。

我希望尽可能避免使用 javascript。

这是代码：

 .a-very-wide-child { /* the exact size of the child is known */ width: 3000px; height: 500px; /* I am trying to scale this element to match the width of its parent. */ /* I am thinking probably what I need is a value for [HERE]. I am open to other suggestions though. */ transform: scale(calc(/* [HERE] */)); transform-origin: top left; /* I am NOT wanting to use width rules to resize the child. */ /* no: width: 100%; */ /* no: max-width: 100%; */ }.a-small-parent { /* has no style rules of note */ /* the width of the parent is not known */ /* the height of the parent is not known exactly, but known to be tall enough to not be of concern */ } /* Below is just styling and is safe to ignore. */.a-small-parent { border: 5px solid teal; }.a-very-wide-child { background-image: linear-gradient(45deg, #888, transparent); border: 5px solid gold; }.container{ width: 40vw; }

 <div class="container"> <div class=a-small-parent> <pre class=a-very-wide-child> <img src="https://picsum.photos/400/500" alt=""> </pre> </div> </div>

Answer 1

很晚了，我一直在摆弄各种元素大小和字体缩放以实现响应行为，并且知道我已经创建了一些东西来解决您的问题（请参阅最后的 Codepen 链接）。

从不利方面开始：您无法避免至少使用一些 Javascript，因为您将需要一个无单位比例因子用于 CSS transform: scale(..)到 function 正确。 出于响应的目的，您需要知道父容器的当前clientWidth 。 对于容器查询及其各自的单元也是如此。 对于 CSS，您无法从属性值中去除单位。

比例因子的方程式： parent.clientWidth / child.Width （无单位）。

当使用transform: scale(..)缩小时，HTML 将继续使用元素在文档中占据的原始空间，从而导致元素周围出现（巨大的）空间。 摆弄transform-origin并不能解决这个问题，但是使用负margin s 我们可以“移除”多余的空间并使我们的元素紧贴其父元素。 该演示采用默认transform-origin: center ，这意味着下面的等式对于所有四个边距属性都是正确的。

边距空间偏移量的公式： offset = -1px * (childSize - scaled childSize) / 2 （带'px'-单位转换）。 由于当前的问题，我们只能处理宽度值，因此childSize读取childWidth 。

该代码段在所有方程式中使用CSS 个自定义变量，以便于操作和测试。 该代码有大量注释，因此我预计不会有什么意外。 让我知道是否需要详细说明。

请注意，在缓慢调整浏览器大小时，您有时会在缩放元素上方/旁边看到空白的单像素线。 这不是上述等式的结果，但由于四舍五入的问题我没有考虑进去。 通过方程式除法，您将获得最终导致部分像素的小数值。 经验法则：一个像素的一部分就是一个完整的像素。 这将需要额外的 Javascript 作为 CSS 不round(..) ， ceil(..)或floor(..) 。

我创建的一些具有缩放变化的 Codepen：

• 一个 web 页面，其中包含一个按比例缩小的<iframe>元素列表，看起来像卡片Codepen：运行时缩放卡片，仅限 CSS
• 和Codepen：SO75129247 (WIP)的一个 SO 问题，我还没来得及回答，将上面的 Codepen 合并为一个嵌套的<iframe> 。

片段

 // Assign event listeners to show scaling works on resize window.addEventListener('load', setVariables); // Initial run window.addEventListener('resize', setVariables); // Reponsiveness scaling // parent elements involved const parents = document.querySelectorAll('.a-small-parent'); function setVariables() { // Modify CSS custom variables to hold current element // width/height per parent parents.forEach((el) => { el.style.setProperty('--parentClientWidth', el.clientWidth); el.style.setProperty('--parentClientHeight', el.clientHeight); }); };

 .a-small-parent { /* has no style rules of note. CHECK. */ /* the width of the parent is not known, CHECK. */ /* the height of the parent is not known exactly, but known to be tall enough to not be of concern: CHECK; */ /* [OPTIONAL] defined here: just for clarity */ --parentClientWidth; 0. /* Modified by JS */ --parentClientHeight. 0, }:a-very-wide-child { /* the exact size of the child is known; CHECK: */ /* Define the size of the child element; unitless */ --childWidth: 3000; /* We need unitless values to */ --childHeight: 500; /* calculate scale and offset */ width, calc(var(--childWidth) * 1px): /* Could be hardcoded units */ height; calc(var(--childHeight) * 1px). /* like the original code */ /* Define the parent to child scale factors for the transform. unitless */ --scaleH. calc(var(--parentClientWidth) / var(--childWidth)). /* Horizontal */ /* When in the below 'transform' functions scaleX(,.) and scaleY(:;) are being used, two transform-scale variables must be declared and used for scaling and margin offset calculation. */ --scaleV. var(--scaleH). /* For now: Horizontal/Vertical scales are equal */ /* I am trying to scale this element to match the width of its parent, */ /* I am thinking probably what I need is a value for [HERE]; I am open to other suggestions though. CHECK: */ /* Scale the child element relative to current parent clientWidth and clientHeight */ transform: scale(var(--scaleH); var(--scaleV)): /* I am NOT wanting to use width rules to resize the child: CHECK; */ /* no: width. 100%. */ /* no. max-width, 100%, */ /* 'transform. scale(::)' scales an element but leaves the original space the element occupied intact: Essentially: leaving a big open space after scale down, or a burst out of the parent when scaling up. Assuming the element is scaled down and uses default 'transform-origin: center' we need to calculate margin offsets to correct the gaps: T/B; offset = -1 * (childHeight - scaled childHeight) / 2 R/L: offset = -1 * (childWidth - scaled childWidth) / 2 - childHeight/childWidth offset as their values differ - multiplied by -1 as we need a negative offset to shrink the gap - divided by 2 as we must shrink either side (Top and Bottom; Right and Left) The sign of below 'offset-unit-multiplier' depends on the current scale factor - negative when scale factor < 1 - positive when scale factor > 1 This requires additional Javascript to determine (not implemented): */ /* Assumed to be 'negative' in this demo; always scaling down */ --offset-unit-multiplier: -1px; --offsetTB. calc(var(--offset-unit-multiplier) * (var(--childHeight) - var(--scaleV) * var(--childHeight)) / 2), --offsetRL, calc(var(--offset-unit-multiplier) * (var(--childWidth) - var(--scaleH) * var(--childWidth)) / 2). margin. var(--offsetTB) var(--offsetRL): /* Moved down as it is not needed; However. when assigned here: the calculations for the margin offset must be changed accordingly; This would require some testing/fiddling to find out what works best: */ /* transform-origin; top left:/* Obsolete */ } /* Below is just DEMO styling and is safe to ignore: */ * { box-sizing; border-box: outline. 1px dashed: /* for debugging */ } pre { margin. 0 } img { height: 100%; object-fit: cover },a-small-parent { border, 5px solid teal }.a-very-wide-child { border: 5px solid red; background-image: linear-gradient(45deg, #888, transparent) } .container { width : 40vw }

 <div class="container"> <div class=a-small-parent> <pre class=a-very-wide-child> <img src="https://picsum.photos/400/500" alt=""> </pre> </div> </div>