Display images in Firefox – no margins, full scale

Have you ever been a bit dissatisfied with how images display in Firefox? I was recently making up some web page mockups that I wanted to display full scale, as if they were being viewed in the browser, but I had 2 problems:

  1. The images were displaying with a white margin left and top
  2. Firefox automatically scales the images so they fit the window – annoying when my mockups were very long and I wanted to view them with a scrollbar.
Thankfully, there are solutions and they are permanent so you don't need to keep applying the fix each time you want to do this.

Bad, bad margins
  1. On a mac,??Right-click on Firefox app icon (in your Applications folder)
  2. Select Show Package Contents
  3. Then open contents>MacOS
  4. And then res
  5. Open html.css??in a text editor
  6. You'll find a line reading something like??
    body {
    margin: 8px;
  7. If you have trouble finding it do a 'Find text' and look for the 8px
  8. Change the 8px to 0
  9. Quit Firefox, restart and drag an image in – no margin!

Me no resize please

This is even easier to fix.
  1. In the Firefox browser URL bar, type about:config??(Never come across this before? It's lots of fun, but don't get distracted)
  2. In the new Filter search, enter??browser.enable_automatic_image_resizing
  3. You'll notice it's set to true, in other words it's saying yes, do resize images
  4. Click it, and it will change to false
  5. Quit Firefox, restart and drag an image in – it still gives you the option to zoom out but the default view is now the full scale version, yay!

As an aside, you may be wondering why I was trying to do this in Firefox at all – the short answer is none of the other browsers I tried got me close enough to what I wanted… turns out it just took a bit of patience and the help of a friend.??

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

One Response to Display images in Firefox – no margins, full scale

  1. Twelve-60 says:

    C:Program Files (x86)Mozilla Firefoxreshtml.css on windows 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s