CSS/JQuery: Positioning and resizing text with background image

Question

I have a div with text whose height, width, and position (top and left) are specified in percentages so that it can resize with the browser window. This div also has a background image whose aspect ratio I want to maintain while I resize and I want to resize the text so that it fits within the boundary of the div.

I found a jQuery plugin which I modified a bit so that I can resize the font-size onResize to fit in the div. The result: http://jsfiddle.net/JMVXA/10/

Now what I'm trying to do is put this div in another div with a background image whose size changes onResize and at the same time keeps the aspect ratio of the image (so it won't look distorted).

I'm having difficulty with this though, since if I get the automatic text resizing to work I don't maintain the aspect ratio, and if I get the aspect ratio right, the text won't resize.

Got the text resizing, but (if you squish the bee too small) it skews the picture instead of maintaining the aspect ratio: 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%;
}

If I change #parent to this, the aspect ratio works, but the text does not resize appropriately:

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

I know part of the problem. The plugin requires that the width() and height() return a nonzero number, but my CSS for the aspect ratio leaves the height unspecified (making it return 0 for height). So I'm not sure what to do from here.

Any ideas on how to accomplish this?

I'm very new to HTML, jQuery and CSS, but I have programming experience in other languages.

EDIT1 I want the text div to keep the same relative size and position within the image. It would be as if the text was inside the picture itself (in terms of positioning and size). So the text should always be on the bee's wings. And I want to keep the same aspect ratio when resized. EDIT2 Some more information: I'm making a website that has large images with some text in front of them. So I would like to be able to specify the dimensions and positions of the div which will hold the text and have whatever text I put in the div to be resized so that it can fit inside the boundaries of the div.

Answer 1

Hmmm, have you considered using background-size: contain instead? Then it'll scale, but also be as large as possible with the correct aspect ratio. For "#parent", the styles I changed/added were:

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

Here's a JSFiddle example to show you what I'm thinking you want.

If this isn't the intended behaviour, please let me know, and I'll be happy to help you further. Good luck!

(Edit) After better understand your goal, I think I achieved the intended behaviour you wanted. You can see it here .

In effect, just juggled some CSS and structure. I removed the bee and made it an img element inside of "#parent" instead of its background, I'm not sure if you mind that.

In terms of CSS, here are the relevant style definitions I changed/added:

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

I hope this helps!

Answer 2

I don't know if it is exactly what you wants but... http://jsfiddle.net/euK8C/

1. I changed yours 'jQuery. textFit v1.0' to ' FitText.js 1.1', mine is in first place at google for 'fit text' and looks (and works) fine. (He doesn't need fixed width of text container)
2. Removed ' #grandparent ', now we have just a ' #parent '.

3. Added an '< img >' tag with style

    max-width: 100%; 

   so the height will be proportional to the width.

4. Changed ' #parent ' style to:

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

   no need for width and height

5. Why using '# spanBold ' '..italic' etc.? Use ' em ' for emphasized text (he will be italic anyway) and ' strong ' for strong words :) more here...

Our image is now standalone, we (browser) know what is width of it so ' #parent ' can resize to wrap whole image.

The same do '. sandia ' which is now from 5% at top and left, and have 90% width and height of the parent. (90% cuz I wanted 5% gutter at each side).

At the start we fitText() .sandia and every time when document is resized.

---

Edit 1.

I don't have any idea now about doing something like this using div with background-image , of course it's can be made using JS , but pure CSS ? Maybe something with flex box model.

Answer 3

This worked for me: http://jsfiddle.net/JMVXA/53/

The key is to set the alignVert property to false:

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

This prevents textFit from setting display:table on your element in order to vertically align the contents (which, in some browsers, causes percentage heights to fail). This caused the bizarre sizing you're seeing. Unfortunately elements set to display:table are prone to sizing issues. This particular one is new to me. In a future version I will be sure to wrap the text in a containing div or to find another method of vertical alignment (likely using negative margins).

You'll see that if you click the textFit() button and size the text 1px larger in the inspector, it will overflow its bounds; it is sizing correctly.