像图像一样缩放 div

Question

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

例如，我有一个 div:

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

我的样式如下：

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

这向我展示了 div 810px 宽和 800px 高，在屏幕上很好地居中并带有轮廓。

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

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

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

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

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

我看过这样的缩放文本 link：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 值（就像我在示例中所做的那样）。

像图像一样缩放 div

Scale div like an image

html

javascript

css

jquery

scale