javascript - 像图像一样缩放 div

Question

我正在尝试根据 div 的宽度缩放内容。

例如，我有一个 div:

<div id="container"></div>

我有这样的样式:

#container { margin: 0px auto; width: 810px; height: 800px; border: 1px solid #000; }

这向我展示了一个宽度为 810 像素、高度为 800 像素的 div，它很好地位于屏幕中央，并带有轮廓。

假设我在顶部有一个横幅图片，它应该随 div 缩放，所以我将它的宽度设置为 100%。效果很好。

我有一个容器 div 本身的背景图形设置为随宽度缩放，效果很好。

我需要帮助的是，假设我在横幅下方有一个标题，但此字体大小需要根据容器的宽度与其他所有内容一起缩放。我将如何做到这一点？

我还希望添加其他元素，例如需要缩放的按钮。

在一天结束时，想象一下宽度为 100% 的图像，以及它如何完美地按比例缩放。这就是我需要容器 div 及其所有子元素的方式，就像图像一样。我希望这是有道理的。

我看过这个链接中的缩放文本:http://jsfiddle.net/Aye4h/

这是完美的行为，但我需要的不仅仅是缩放文本。

Answer 1

缩放是一件复杂的事情，因为某些内容是基于矢量的或按需呈现的，而某些内容是基于光栅的(例如图像)。如果您想像缩放图像一样缩放整个元素，请查看 transform: scale:

#scaled {
  border: #f00 solid 5px;
  background: #0ff;
  height: 500px;
  margin: -125px;
  transform: scale(0.5);
  width: 500px;
}

<h1>This is outside the scaled element</h1>
<div id="scaled">
  <h2>Inside the scaled element</h2>
  <p>An image:</p>
  <p><img src="http://i.imgur.com/3A1Loxw.jpg"></p>
</div>

请记住，transform 是在图像布置在页面上之后应用的，因此它周围的所有内容都会认为它仍处于原始大小。您可以通过许多其他方式解决此问题，例如使用负 margin 值(就像我在示例中所做的那样)。