Question

我正在尝试根据div的宽度来扩展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：

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，图片在页面上布局后会应用transform，因此周围的所有内容都会认为它仍然保持原始大小。您可以通过许多其他方式解决此问题，例如使用负margin值（就像我在示例中所做的那样）。

像图像一样缩放div

1 个答案: