HTML5 Image Enhancer Support Product Page


How to display images at a set dimension?

Asked 10 Apr 2014 06:24:32
has this question
10 Apr 2014 06:24:32 Hans Kiesouw posted:
How can I set a gallery of images to always show at a fixed dimension, as a set of thumbnails, like 200px X 200px regardless of the original image size or aspect ratio?

We have users that upload images of all sorts of aspect ration and I need to find a way to show a set of thumbnails that are always (for example) 200 X 200 PX so that the layout of the set is consistent. We don't need to have the full image displayed and I was hoping that this extension would provide a way of setting this up.



Replied 10 Apr 2014 11:33:21
10 Apr 2014 11:33:21 Teodor Kuduschiev replied:
Hello Hans,
HTML5 Image enhancer adds effects to the images in the size you provide them. It is not a tool that crops your images to a specific dimensions.
Replied 10 Apr 2014 13:32:01
10 Apr 2014 13:32:01 Hans Kiesouw replied:
Hi Teodor,
Thanks for the response, I do understand that, however I seem to think that is may be possible to show, say just the center part of and image, so that the rest of it is not visible, I have tried using some CSS and a DIV but it does not work that well.

Problem is that we have so many variations of image sizes and orientation, I was hoping to be able to just show a fixed size, without distorting the actual image, but "hiding" bits that are outside the set dimension.

Any help, would be appreciated.
Replied 10 Apr 2014 13:38:43
10 Apr 2014 13:38:43 Teodor Kuduschiev replied:
You can use the images as background for fixed size divs, for example:
<div class="thumb" style="background:url(IMAGE_PATH_.jpg) no-repeat center;"></div>

Then style your divs:

.thumb {

But unfortunately this way you won't be able to apply the image enhancer on them, as the images will be backgrounds.
Replied 10 Apr 2014 14:22:10
10 Apr 2014 14:22:10 Hans Kiesouw replied:
Thanks Teodor,

I guess I will have to live with some minor differences then, as I do like the image enhancer.

Appreciate your help.

Reply to this topic