Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Images' aspect ratios are not kept in grid list #343

asiayeah opened this Issue Sep 18, 2012 · 11 comments


None yet
4 participants

The grid layout by default assumes that images are a 16:9 aspect ratio, or you can set the data-bb-style="square" attribute to make the images be scaled to a 1:1 aspect ratio.

Is there a way to display images which isn't square nor 16:9 in grid layout? Right now they are scaled without keeping their aspect ratio. Could we have an option to crop them while keep their aspect ratio?


tneil commented Sep 18, 2012

Those are currently the only options for the grid layout. I've marked this as a feature request for a possible future enhancement.

The grid list will be much more useful with an option to keep the aspect ratio. Is it going to be a quick change? I would assume we can make use of HTML5 canvas to do the necessary image cropping.


tneil commented Sep 19, 2012

I doubt it will be a "quick" change.. are you looking for cropping? or are you wanting to use the row height to be used to change the image height with proper scaling?

I haven't read or understand the grid list codes yet. However, I am thinking the "quicker" way is to crop the images so that it fits the original height & width, while keeping the aspect ratio.


tneil commented Sep 19, 2012

Setting the implementation details aside, which would you rather have.. images somehow cropped, or sized to fit in the grid somehow?

Hi !am just jumping into blackberry development. Well am having the same issue of not being able to maintain aspect ratio of the images. The images I want to display in the grid are 180x266 and the 16:9 aspect ratio just stretched them too much and 1:1 is not a fit either.. Is this the default behavior in the case of imageList also?
By the way great job on bbui.js!


tneil commented Sep 19, 2012

The grid list does either a 16:9 or a 1:1 stretching of images... The image list will stretch the image as a 1:1 to fit properly in the list.

There isn't a grid/list layout in bbUI that presents images in an arbitrary size and aspect ratio. You would need to create your own custom layout for these types of displays at the moment

Setting the implementation details aside, which would you rather have.. images somehow cropped, or sized to fit in
the grid somehow?

Thanks, Tim, for clarifying.

I think that depends on the application, and either option will be a valid use case. I don't really know at this moment I'm afraid. How about the native Cascades' GridListLayout? Ideally we should get bbUI's grid list to have similar functionality.

In Cascades, it looks like they have defined ScalingMethod (e.g. AspectFit, AspectFill, Fill and AspectCrop).


tneil commented Sep 21, 2012

I'll look at the cascades image grid further and see what can be done

Let's say I am displaying a grid of square images in 3 columns, if my last row has 1 or 2 images only, they will be scratched to the full width of the grid and thus look much bigger than others. I don't think this is the most common use case.

However, the documentation does mention: "If a row has only one item in it, it's width will be the full width of the size of the grid. A row with 2 items will be 1/6, and 3 items will be 1/9 the height of the screen. All images are currently set to be stretched to the size of their container."

  1. Is there a good suggestion to achieve what I want? I assume if I don't have enough images on the last row, the remaining items will simply appear empty. One way is perhaps support adding dummy grid items as placeholder.

  2. Is there a way to support scrolling down to the bottom of the grid to fetch more items? (is it possible via iScroll?)

Thank you.

Following this topic... because now, we have useful carousel...

If we take a picture with bb10 phone in portrait mode the aspect ratio is 9:16

I wish to make a grid list carousel mode but the photos don't scale very well (on square are the closest mode but looks squashed), then i wish to propose a third mode available to the grid


@tneil tneil closed this Jul 17, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment