使用 CSS 和 JavaScript 进行缩放/比例内容

网络是一个充满活力的地方。不同的屏幕尺寸，等等。幸运的是，网络已经为此做好了准备。文字换行。CSS 让我们可以控制如何调整大小。我们无法轻易获得的是一种按比例缩放整个元素（及其子元素）的方法——保留其在尺寸改变时的确切布局。

但是我们可以做到。

*容器*的比例缩放非常容易

戴夫叔叔的旧填充盒

.parent {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}

如果您想在里面放置内容，您可以绝对定位一个覆盖容器在里面

.child {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

这对图像、可以独立滚动的容器或有大量空闲空间以应对形状发生巨大变化的容器非常有用。

如果此容器的内容是，比如，一个图像，它工作得很好！

但如果里面有 一堆 HTML 元素子元素 只做普通 HTML 元素做的事情，情况就不那么乐观了。

所有内容的比例缩放

假设我们要实现这样的效果

仅 CSS 无法实现。但 CSS 仍然是答案！transform: scale(); 是我们需要的。它以完美的比例缩放事物。我们只需要给它一个缩放比例，而这个缩放比例我们可以用一些 JavaScript 来计算。

The trick is

var scale = Math.min( 
  availableWidth / contentWidth, 
  availableHeight / contentHeight 
);

这是可能的一种方法，使用 jQuery 和 jQuery UI Resizeable（因为这对我很容易也很舒服）

查看 CodePen 上 Chris Coyier 创建的 Pen Resize with Scale (@chriscoyier) 。

其他方法……

SVG 本身就可以做到这一点。我们很快将在文章中介绍这一点。我有几句话要说。;)

此外，您可能可以使用 vw/vh 单位来调整所有内容的大小，但这听起来很麻烦，而且需要很多神奇数字。

您可能很少需要这样做

我之所以这么关注这个想法，是因为我注意到来自 Slides.com 的嵌入式幻灯片演示文稿就是这样工作的。

@chriscoyier 谢谢！内容按比例缩放，但背景大小可灵活调整以填充可用空间的 100%。pic.twitter.com/1CybHUBdoS

— Slides (@slides) 2015 年 11 月 18 日

这是一个完美的用例。Slides.com 为您提供了一个固定大小的画布来创建您的幻灯片，这完全有道理。然后这些幻灯片可以根据需要放大，以在更大的空间中演示。或者缩小以适应更小的屏幕（比如，如果您将它们嵌入到内容列很窄的博客文章中，或者在移动设备上查看）。

我也在考虑 嵌入式 Pen。有时人们设计 Pen 可以在更大的区域中工作，而当它被嵌入时，设计就会失效。我可以使用它来按比例调整内部内容的大小，但仅限于适应所需的大小。

也许是 iframe？可能主要是第三方或用户生成的内容，并且在比例很重要的情况下，否则，继续使用常规的 RWD 操作。