Auto Size Images brought in with Data

Responsive Flexible Layouts
1

Hi there, this is hard to explain and I may not use the correct terminology.

I have a project I am working on that brings through images from a data list - my issue is that the images coming from the data are both portrait and landscape.

I currently have a rectangle shape targeting the data field and is pulling in the images correctly.

What I am wanting to achieve is the following:

  • I would like the portrait images to 'fill' the rectangle shape
  • I would like to also have the portrait images 'align to the center' of the rectangle.

If anyone could offer some help or point me in the right direction that would be greatly appreciated!
Thankyou!

2

the HTMLImageElement owns the properties naturalWidth and naturalHeight. You may compare them and apply corresponding styles.

///
say you've got an imageUrl:

  1. create a new Image()
  2. apply img.src
    3. img.onload run a function to distinguish the orientation
2 Likes
3

You can set background-position and background-size.
Either by JavaScript (that is how I do it in Hype Data Magic) or by CSS media queries (using a class).

2 Likes