MMM-BackgroundSlideshow

[A Former User]

I made several modules handling photos - MMM-GooglePhotos, MMM-WeatherBackground, MMM-DropboxWallpaper,…

All modules can display photos by its aspect-ratio with covering the target area or resizing to show whole picture.
Try them.

• MMM-DropboxWallpaper (https://github.com/eouia/MMM-DropboxWallpaper)
  

• MMM-GooglePhotos (https://github.com/eouia/MMM-GooglePhotos)
  

[A Former User]

Anyway, If your module would be using img tag for showing photos, module should know the exact image size and calculate to resize it by proper target ratio.
Instead, I prefer using Background CSS trick. background-size:cover will cover whole image to entire area of it’s element, background-size:contain will resize image to fit to target element size. Suprisingly, without any calculation.

[sdetweil]

@sean how about a portrait photo sample…

the tv/monitor aspect ratio (16:9) doesn’t fit unless u stretch or clip the image…

the sunrise is 6000x4000 pixels the portrait photo is 4000x6000 (both WxH)

[sdetweil]

@sean but it distorts the picture, not in original format… which is what I want…

[A Former User]

@sdetweil
There are two options for vertical photos on horizontal screen.

• cover : whole screen will be covered by part of photos. but some areas(top and bottom) of photos will be out of screen

• contain : whole picture will be shown from bottom to top. but some remain area of screen (left and right) will be black.

[sdetweil]

@sean i understand… but BOTH distort the image presentation

[A Former User]

@sdetweil
Which distortion? It’s just resizing.

[sdetweil]

@sean bingo… if something is clipped (not shown) then its wrong… I fiddled with all those css settings and finally gave up… i calculate the dimensions myself and all is good on EVERY picture

[A Former User]

@sdetweil
Then you can use just contain mode .
Here is my another module handling image - MMM-Rijks with same technic.
It can show how contain trick works.

[sdetweil]

@sean ok, that doesn’t work for me… i am not background, i am foreground. (fullscreen above).

if I set if on the module div or on the image, I get the same extreme zoom in.