像圖像一樣縮放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值（如我在示例中所做的那樣）。