flexible sized graphic item?

Freeway
1

Is it possible to have a flexible sized graphic item - so that the image is large on large viewports and smaller on smaller viewports.

I guess what I want is a responsive graphic item.

Thanks

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

2

There is an action for that - http://actionsforge.com/projects/view/77-flexible-image

David

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

3

The only issue is that any images that the action is applied to will go flat as a pancake in IE 9-. These directions are better: http://blog.calebgrove.com/2013/02/flexible-image-and-ie.html

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

4

The only issue is that any images that the action is applied to will go
flat as a pancake in IE 9-. These directions are better:
http://blog.calebgrove.com/2013/02/flexible-image-and-ie.html

Will it? I’ve been using the width:100% with height:auto for some time
now, and never had the pancake issue in IE9 (or even IE8, for that matter)
that you encountered.

–

( For the sake of clarity, when I refer to an image in the context of
Freeway Pro in the following, I am referring to a Pass Through image. )

I previously used the Remove Dimensions action on images until I realized
that any proper CSS rule would over-ride the inline html img attributes –
not the “style” declaration mind you, just the img tag attributes of width
and height. This wasn’t always the case, but at some point browsers began
to favor CSS width and height over the html attribute tags (width=x,
height=y)

I started using a class style to identify a container (e.g., “.imagebox”)
then a second rule to target the (any) image it contains (.imagebox img)
with a CSS defined style of width:100% and height:auto. This forces the
contained image to fit the width of the image container - which is set to a
percentage width of it’s own container. And with a flexible height, so that
it all adjusts itself automatically.

Freeway Pro 6 lets you apply some width/height stuff right on the image
itself (only tested on Pass Throughs) and will roll any image Item Extended
style rules into the external sheet with an id selector style rule (
#myfreakingimage1 )

Anyway, I did this quick mockup - notice no “pancaking” in IE9, though for
some reason it were misbehaving (sticking out of the box at the right). No
time to figure out why, just weird that IE8 would look better than 9.

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

5

I’ve just tried the Flexible Image Action and it doesn’t seem to do anything…

http://www.advocatedesign.co.uk/alex2/trail.html

I set both width and height to be flexible with 100% - expecting the image to fill the viewport, but nothing happens.

I don’t get it

Mark

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

6

expecting the image to fill the viewport, but nothing happens.

It certainly does - but not how you are expecting it.

It will only fill the container it is in - in your example that is not the viewport it is a Div called D108

David

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

7

Hi David

OK thanks. I’ll give it a go

Mark

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