像图像一样缩放div

Question

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

例如，我有一个div：

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

我的样式如下：

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

这为我提供了810px宽和800px高的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值（如我在示例中所做的那样）。