If you want to make your photo height responsive to the paragraph(s) of text to the right or left of it, then you want to use a background image and padding on a parent element to give this illusion. Make your background image as tall as you want to react to, but either center (vertically) or place the most important part of the image near the top of the overall image area:
+----------+
| |
| x x |
| | |
| ___/ |
| |
| |
| |
| |
+----------+
(sorry in advance to Mail users, this ASCII-gram looks horrible in proportional fonts)
Now, insert an HTML box inline to hold your text. Paste the text into that box, then set its height to indeterminate (click on the up/down arrow icon left of the height field in the Inspector – the box will shrink-fit to its contents. Next, set the padding-left attribute to a width that is wider than the photo you made in the first step – just wider enough to provide a gutter between photo and text. Now, use the Style tab of the Inspector to set the background image of that HTML box to the photo you made. Make sure that you set the image position to top and left (no-repeat). That’s it, you’re done. If you want to make the image float to the right of the text, just set the image to position right top, and set the padding-right instead of the padding-left.
Now, when the text dimensions flex because of browser settings, more of the too-tall image will be revealed. Likewise, if the fonts are set smaller, the image will be cropped.
Walter
On Jul 3, 2012, at 4:57 AM, Jonathan Riddle wrote:
Hi all,
I have a fairly complicated design for a website and I am just wondering if there is a method I could use in Freeway which would adjust the crop, depth, percentage of an image depending on what depth the related text next to the image makes.
The text is on a coloured background, and that background flows deeper depending on the number of text lines. So, if the text makes 10 lines in IE, but only 8 in Safari the box grows or shrinks to keep everything tidy. However, the pic is remaining at the size I import it at, and it would be good if I could show more depth to match how the text box flows.
Also considering using web fonts, and obviously should that fail to work on certain browsers, the layout could break completely if I can’t find a way of adjusting the image size on the fly.
Thanks in advance.
Jonathan
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
