1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Displaying Images With Shoes


2 of 4

Resizing Images
Displaying Images With Shoes

Images, like all other Shoes elements, can take :width and :height parameters. These width and height parameters follow the same rules as used with other elements. If, for example, you wanted to make an image span the entire available horizontal space, you could do so simply by using the parameter :width => '100%'. If you wanted that image to be 300 pixels, all you'd need to do is use :width => 300 as a parameter.

It's important to note that when resizing images, the proportions of the images are not preserved. This isn't really any different than what happens when you resize an image for any other purpose. How many times have you seen a screensaver of someone's Great Dane that looked suspiciously like a Bulldog? That image is the result of problems with the proportion. You can stretch an image out horizontally, but it won't automatically be stretched vertically, making the image look "squashed."

Shoes.app :width => 300, :height => 460 do
  stack do
    para "Normal sized image"
    image "shoes-logo.png"

    para "\n\nStretched image"
    image 'shoes-logo.png', :width => '100%'
  1. About.com
  2. Technology
  3. Ruby
  4. Graphical User Interfaces
  5. Shoes
  6. Resizing Images

©2014 About.com. All rights reserved.