How do I resize images with fuild grid layouts like the Adobe Pluralist example website does?
I notice that the image initially centres to the section of the page it sits in, then once a size threshold has been passed, it reduces down in size. How is this acheived? I personallay give an image a width of 100%, and then rely on the aspect ratio to deal with the height, but I am told this isn't the correct method due to issues created by IE, so what should I be doing?
I don't have any code at the moment for the project I am about to start, but it would be something as simple as this:
<img src="images/file.jpg" width="100%">
This I would sit inside a responsive div, or just have it sitting on the page by itself outside of any div. It works fine on any devices I have tried it in, and it also works fine in any browser I have tried, but I have been told that IE doesn't hold the aspect ratio, but I've not seen it, and as the majority of the world are in IE, I feel it is still best to build for it... no matter how much it gripes me!
Matthew, the first place to begin would be to create a new document in DW as 'Fluid Grid Layout (FGL)' in DW CS6. Pluralist site is a responsive site, exactly what you can achieve with DW CS6.
This 3 part tutorial is a great place to start - http://webdesign.tutsplus.com/series/dreamweaver-cs6-fluid-grids/
All the best!
Europe, Middle East and Africa