Contain image to file aspect ratio

OL Connect Enterprise Designer
1

We are using a dynamic image setup with about 40 eps images. Unfortunately 2 are smaller than the rest but need to fit within the same area, centered.

Currently the smaller images are filling the image area rather than remaining the full size. Am I right in thinking we need to wrap the image in a box, remove the size requirements, and then center the image within the box? Any other suggestions or confirmation of the correct css?

2

I suggest dynamically setting the image as background image for the box. This can be achieved using the CSS background property and a bit of scripting. The following code sets an image as background image and subsequently sets the background size to cover. The latter resizes the image so that it fits the box but covering the entire area (e.g. the box may clip parts of the image).

??results.css({'background' : 'url(images/bot.png) center center', 'background-size' : 'cover'});

You may want to set the background size and position properties via a CSS stylesheet (e.g. context_print_styles.css) so the script focusses on setting the proper image. E.g.

#mybox {
  background-size: cover;
  background-position: center;
}

In this scenario the script would look something like this:

??results.css('background-image','url(images/spaceship.png)');

Hope this helps,

Erik

1 Like