Skip navigation
stuartskeltonuk
Currently Being Moderated

stop images scaling in fluid grid layout cs6

May 22, 2012 6:13 AM

Hi, ive been playing about with the fluid grid layouts and I think im picking it up quite nicely. One thing that is confusing me though is with the images. If I insert an image and want it to scale thats fine, if however I want to stop the image from scaling all I should have to do is enter a height and width figure, CS6 even does this for you in the properties box. This however does not work for me, when I enter height and width the image still scales but also skews aswell. Ive tried no dimensions, dimensions with padlock on/off but its not working.

 

http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layou ts/

 

This video shows what I want to achieve from about 15 mins onwards.

 

Please help me

Regards

 
Replies
  • Currently Being Moderated
    May 22, 2012 6:20 AM   in reply to stuartskeltonuk

    Can you post your code here?

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2012 7:28 AM   in reply to stuartskeltonuk

    Well since you want your images to remain at the same size at ALL browser window widths then you need to make sure that the <div> is wide enough when the browser window is reduced, so you need to set those <divs> to the min-width of the image, instead of in percentages:

     

    #LayoutDiv1 {

        clear: both;

        float: left;

        margin-left: 0;

        min-width: 439px;

        /* width: 100%;*/

        display: block;

    }

    #LayoutDiv2 {

        clear: both;

        float: left;

        margin-left: 0;

        min-width: 335px;

        /*width: 100%;*/

        display: block;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2012 8:34 AM   in reply to stuartskeltonuk

    stuartskeltonuk wrote:

     

    Hi thanks for your answer, that does the job its just watching the video all he does is fill out the w and h in the html code or presumably properties also

     

    Yes, that's for the image in the left column which when reduced is never narrower than the small portrait image itself.

     

     

    stuartskeltonuk wrote:

     

    If im honest I will let images scale as its kind of the whole point of a fluid grid layout, it was more the fact it wasnt working as per video.

    Yes, that is the point of the majorty of fluid design. But as shown in the video there are some images which may look better or you just want to remain the same size.

     
    |
    Mark as:

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