CSS / JQuery：使用背景圖片定位和調整文字大小

Question

我有一個div，其文本的高度，寬度和位置（頂部和左側）以百分比指定，以便可以在瀏覽器窗口中調整大小。 該div也有一個背景圖像，我在調整大小時要保持其寬高比，並且要調整文本的大小以使其適合div的邊界。

我找到了一個jQuery插件，我對其進行了一些修改，以便可以調整字體大小onResize以適合div。 結果： http : //jsfiddle.net/JMVXA/10/

現在，我正在嘗試將這個div放置在另一個div中，該div具有背景圖像，其大小會更改為onResize，同時保持圖像的長寬比（因此不會看起來失真）。

不過，我遇到了困難，因為如果我能夠自動調整文本的大小以使其正常工作，那么我就不會保持寬高比，而且如果我正確設置了寬高比，則文本也不會調整大小。

調整了文本的大小，但是（如果將蜜蜂壓得太小），它將使圖片傾斜，而不是保持寬高比： http : //jsfiddle.net/JMVXA/11/

#parent{
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url("Bee Image");
    //padding-top: 81.799591002%;
    background-size: 100% 100%;
}

如果我將#parent更改為此，則可以使用寬高比，但文本的大小不能適當調整：

#parent{
    width: 100%;
    position: relative;
    background-image: url("Bee Image");
    padding-top: 81.799591002%;
    background-size: 100% 100%;
}

我知道部分問題。 該插件要求width（）和height（）返回一個非零數字，但是我的CSS寬高比未指定高度（使其高度返回0）。 所以我不確定從這里做什么。

關於如何做到這一點的任何想法？

我是HTML，jQuery和CSS的新手，但是我有其他語言的編程經驗。

EDIT1我希望文本div在圖像內保持相同的相對大小和位置。 就好像文本在圖片本身內部一樣（就位置和大小而言）。 因此，文字應始終貼在蜜蜂的翅膀上。 我想在調整大小時保持相同的寬高比。 EDIT2一些更多信息：我正在制作一個網站，上面有大圖片，前面帶有一些文本。 因此，我希望能夠指定將容納文本的div的尺寸和位置，並在div中放入任何要調整大小的文本，以使其適合div的邊界。

Answer 1

嗯，您是否考慮過使用background-size: contain ？ 然后，它會縮放，但使用正確的寬高比也要盡可能大。 對於“ #parent”，我更改/添加的樣式為：

#parent{
    background-size: contain;
    background-repeat:no-repeat;
}

這是一個JSFiddle示例 ，向您展示我在想什么。

如果這不是預期的行為，請告訴我，我們將竭誠為您服務。 祝好運！

（編輯）更好地了解您的目標之后，我認為我達到了您想要的預期行為。 你可以在這里看到它。

實際上，只是弄亂了一些CSS和結構。 我刪除了蜜蜂，並使其成為“ #parent”內的img元素，而不是其背景，我不確定您是否介意。

在CSS方面，以下是我更改/添加的相關樣式定義：

#what{
    width: 80%;   
    height: 20%;
    position:absolute;
    top:0;
    right:0;
}
#parent{
    width:100%;
    display:inline-block;
    position: relative;
}
#parent img{
    width:100%;
}

我希望這有幫助！

Answer 2

我不知道這是否正是您想要的，但是... http://jsfiddle.net/euK8C/

1. 我更改了您的jQuery。 textFit v1.0”到“ FitText.js 1.1”，我的Google在“ fit text”中排在首位，並且看起來（工作得很好）。 （他不需要固定寬度的文本容器）
2. 刪除了“ #grandparent ”，現在我們只有一個“ #parent ”。

3. 添加了帶有樣式的“ < img >”標簽

    max-width: 100%; 

   因此高度將與寬度成比例。

4. 將' #parent '樣式更改為：

    position: relative; top: 10%; left: 10%; border: 1px solid #39dd9a; 

   不需要寬度和高度

5. 為什么使用' ＃spanBold ''..italic'等？ 在強調的文字上使用“ em ”（無論如何，他都會用斜體顯示），在強詞上使用“ strong ” ：) 在這里更多...

我們的圖像現在是獨立的，我們（瀏覽器）知道它的寬度是多少，因此“ #parent ”可以調整大小以包裝整個圖像。

同樣做'。 sandia '現在從頂部和左側開始為5％，並且父級的寬度和高度為90％。 （90％的原因我希望每側5％的裝訂線）。

首先，我們調整fitText（）. sandia，並在每次調整文檔大小時使用。

---

編輯1。

我現在不知道使用div和background-image做這樣的事情，當然可以使用JS來完成 ，但是純CSS嗎？ 也許與彈性盒模型。

Answer 3

這對我有用 ： http : //jsfiddle.net/JMVXA/53/

關鍵是將alignVert屬性設置為false：

$('#what').textFit({alignVert: false});

這樣可以防止textFit在元素上設置display:table以便垂直對齊內容（在某些瀏覽器中，這會導致百分比高度失敗）。 這導致您看到的異常大小。 不幸的是，設置為display:table元素容易出現尺寸問題。 這個特殊的東西對我來說是新的。 在將來的版本中，我將確保將文本包裝在包含div的文本中，或者找到其他垂直對齊方式（可能使用負邊距）。

您會看到，如果單擊textFit（）按鈕並在檢查器中將文本設置為大1px，它將溢出其邊界； 尺寸正確。