2

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.

joshuar
  • 187
  • 2
  • 10
  • I'd probably try using `em`s, `rem`s & `Media Queries` to tweak it at the breaking points. You can never make it 100% responsive **and** widely device/backwards compatible, but you can get pretty close on both. – Dom Jun 25 '13 at 17:05

3 Answers3

0

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!

Serlite
  • 12,130
  • 5
  • 38
  • 49
  • Well, I wanted the div containing the text to resize with respect to the div with the background image instead of with respect to the window. That way, it sort of looks like the text is embedded in the image. I don't mind if it shifts around a bit, but it should be restricted to the the text div's dimensions. Thanks for responding. – joshuar Jun 25 '13 at 21:46
  • Hmmm...then do you want the background image to be inside of the text div instead of its parent? Like this: http://jsfiddle.net/JMVXA/45/ – Serlite Jun 25 '13 at 21:57
  • lol, nope. Sorry if I'm not being clear. Basically it would look like (as the picture resizes with respect to the window) that you're zooming in and out of the image. When the picture gets smaller, the text gets smaller and the text keeps the same relative position and dimensions. – joshuar Jun 25 '13 at 22:04
  • I think this is the best way to explain it: I want the text div to keep the same relative size and position with respect to the image. It would be as if the text was inside the picture itself (in terms of positioning and size). – joshuar Jun 25 '13 at 22:22
  • The other answer got it, but here's a JSFiddle using your code rather than his. http://jsfiddle.net/JMVXA/46/ – Serlite Jun 25 '13 at 22:30
0

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.

Community
  • 1
  • 1
Daniel Sitarz
  • 300
  • 1
  • 3
  • 12
  • Maybe I'm missing something, but is it possible to specify divs with certain sizes and positions and have them fill with some text with this method? When I tried to do a 20% box I got: http://jsfiddle.net/euK8C/6/ And it doesn't seem the text is obeying the boundaries of the divs. – joshuar Jun 25 '13 at 22:59
  • I came up with a great idea... http://jsfiddle.net/8Wscw/ It's really wrong but it works, just check all font-sizes from 0 to 100 to get good one. The performance is surely bad and sometimes text is getting off (to be fixed playing with for loop step). Maybe will be useful. – Daniel Sitarz Jun 26 '13 at 19:59
  • Yes, this is exactly the behavior I was looking for. Actually this is what the original plugin (textFit) https://github.com/STRML/jquery.textFit does, it just tries a lot of font-sizes until it fits. It uses binary search to get better, O(log(n), performance. – joshuar Jun 26 '13 at 21:07
0

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.

STRML
  • 932
  • 11
  • 8