Skip navigation
matthew stuart
matthew stuart
Currently Being Moderated

Fluid grid image resizing

Feb 26, 2013 1:32 AM

Tags: #image_resizing #fluid_grid

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?

 

Thanks.

377 Views   4 Replies   Latest reply: kennethkawamoto2, Feb 26, 2013 4:55 AM
 
Replies
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    1. Sudarshan Thiagarajan,
    Feb 26, 2013 4:25 AM   in reply to matthew stuart
    Report

    Have you built any code so far? If so, can you put it up on a server and give us the URL so we can look at it and help you out?

     

    -ST

     
    |
    Mark as:
  • matthew stuart
    Currently Being Moderated
    2. matthew stuart,
    Feb 26, 2013 4:43 AM   in reply to Sudarshan Thiagarajan
    Report

    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!

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,729 posts
    Oct 15, 2010
    Currently Being Moderated
    3. Sudarshan Thiagarajan,
    Feb 26, 2013 4:47 AM   in reply to matthew stuart
    Report

    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!

     

    -ST

     
    |
    Mark as:
  • kennethkawamoto2
    Currently Being Moderated
    4. kennethkawamoto2,
    Feb 26, 2013 4:55 AM   in reply to matthew stuart
    Report

    > I have been told that IE doesn't hold the aspect ratio

     

    You have been told wrongly

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points