[Pro] Limiting size of flexible image

Freeway
1

Hi all.

I’m in the process of constructing my first responsive site in FW7 and all going well but I’m stuck with one issue, probably me being dense but though I’d ask you clever people for some advice.

My default page size is 1200px wide and i’m adding images that are set to have flexible % width and when viewed at 1200px width browser window they look fine but when i increase the width of the page to fill the browser on my 27" iMac the images increase to be too large in proportion the site design. Is there a way of limiting the the max size of the image so it doesn’t get any bigger than it’s actual 100% size?

Sorry hope that makes sense!?

Thanks
Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

If you apply max-width 100% to an image, I believe it won’t get any bigger than its natural size.

Walter

On Apr 25, 2015, at 3:10 PM, Dave Dunning email@hidden wrote:

Hi all.

I’m in the process of constructing my first responsive site in FW7 and all going well but I’m stuck with one issue, probably me being dense but though I’d ask you clever people for some advice.

My default page size is 1200px wide and i’m adding images that are set to have flexible % width and when viewed at 1200px width browser window they look fine but when i increase the width of the page to fill the browser on my 27" iMac the images increase to be too large in proportion the site design. Is there a way of limiting the the max size of the image so it doesn’t get any bigger than it’s actual 100% size?

Sorry hope that makes sense!?

Thanks
Dave

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

3

On 25 Apr 2015, 8:42 pm, waltd wrote:

If you apply max-width 100% to an image, I believe it won’t get any bigger than its natural size.

Point is that Freeway doesn’t allow you doing so (without extended dialogue).

I tend to say that, in a responsive world, a page-width doesn’t (really) exist - or at least not a fixed width (to be honest, a page-width doesn’t exist in web at all, but that’s another story).

So set your “page-width” to “max-width: 1200px”.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

If you apply max-width 100% to an image, I believe it won’t get any bigger than its natural size.

Thanks Walter I’ve tried that and yes that works as long as the page is set to maximum or fixed width, however I need the page to be flexible so that some elements of the site expand to fill available screen width. I guess I’ll just have to create different versions of my image to work at different break points.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Point is that Freeway doesn’t allow you doing so (without extended dialogue).

I tend to say that, in a responsive world, a page-width doesn’t (really) exist - or at least not a fixed width (to be honest, a page-width doesn’t exist in web at all, but that’s another story).

So set your “page-width” to “max-width: 1200px”.

Thanks Thomas I understand what you’re saying and it makes perfect sense now that I think about it. And like Walter’s suggestion setting the page width to maximum does solve the image size issue but again it breaks the flexibility of the page. So I guess that confirms the need for different fixed size images for different page sizes/break points.

Thanks both for you swift suggestions though.

Cheers
D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Trying to understand percentage values sometimes drives me nuts… because a percentage value has to always be understood in context… as in, percentage of what?

So I was interested when Walter says 100% max-width on an image limits the upper scaling to 100% of the native image width. Sure enough, that is exactly how it works… I even tested it for myself…

http://cssway.thebigerns.com/workbench/flexible-image-limits/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Hi Ernie,

thanks for this. I certainly did a big mis-statement when I said:

FW doesn’t allow “max-widths” cause it does - pretty easy. Sometimes I forget about the icon-work. So apologize.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Thomas, no worries buddy-- the interface changes have been so understated that I am still discovering new things all the time.

Plus, I am still having issues with containers defined solely by max-width values keeping those values. So, we are coming a long way and still having a long way to go.

Best wishes, always…

Ernie

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Hi Big Erns,

Your tutorial is just awesome! Stuff like that explains things the best way I can imagine.Thank you so much!!!

Cheers,

Chris

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

After stalking this ever and ever again, it’s just that I have a need of writing something more of use than my comments above (shame on me).

Independent of our method applying an image in Freeway (graphic-item with or without pass-through, HTML-item with pass-through) we end up in an img-tag. Images as background is CSS and not part of this talk.

The img-Tag is kinda placeholder, cause we don’t embed an image directly in HTML, we link to them (via src-attribute). So at least we talk about the rectangle surrounding our image.

Picking up Ernie’s Example 1 - Pass-thru image at native size:

The img-tag has no width or height applied. Freeway denotes this as flexible/flexible so allegedly this is “responsive”. But it is not. It can’t cause the size is now coming from the source - or our image which is fix (e.g… 1200px by 800px).

Inspector’s settings feel wrong to me (though in fact they might be true - remember no width/height → “available”).

But it’s one of the most discussed “My images won’t grow/shrink” talks - for some good reasons.

Applying a width attribute

By doing so, we set the img-Tag - better the rectangle - in context (re-read carefully what Ernie said). In both directions, towards the image and the ing-tag’s surrounding. This can be the direct parent or the #PageDIV (which is your page-width) if it comes to absolute positioning.

And here, the max-width makes absolute sense now. No need for a tag to grow bigger than its parent - and even no need for an image growing bigger than its physical dimension.

So I tend to say, that the default for “pass-through-mode” should be fixed 100% - or even fixed 100% max-width: 100%.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options