Search code examples
jquerycssresizeresponsive-designaspect-ratio

CSS/JQuery: Positioning and resizing text with background image

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.

Solution

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