@plainbroke
Hi, i did not use the value but made a quick setup to figure out how to resize the image…
Scrolling did not work in my browser (Firefox). I disabled the complete scrolling and sizing of the module with the config option “limitComicHeight”.
My config looks like this:
{
module: 'MMM-CalvinAndHobbes',
position: 'top_center',
config: {
invertColors: false, // Optional, default: false
grayScale: false, // Optional, default: false
updateInterval: 1000 * 60 * 60 * 12, // 12 Hr
limitComicHeight: -1,
},
},
Then you can define the height of the image in your custom.css with:
#cahcomiccontent {
height: 100px;
}
Edit: If you want to use sliding you can do that with CSS-Animations that should work in all modern browsers.
Add something like the following to your custom.css will do the trick:
.MMM-CalvinAndHobbes .module-content {
max-height: 100px;
height: 100px;
overflow: hidden;
}
#cahcomiccontent {
height: 300px;
}
#cahcomiccontent {
animation-direction: normal;
animation-duration: 5s;
animation-timing-function: steps(2, end);
animation-name: slide;
animation-iteration-count: infinite;
}
@keyframes slide {
0% {
margin-top: 0px;
}
50% {
margin-top: -100px;
}
100% {
margin-top: -300px;
}
}
Explanation:
First we limit the height of the outer container “.module-content” to a specific height (100px) and hide all parts that are bigger (overflow: hidden).
No we set the height of the inner container (the image with id cahcomiccontent) to a height that is bigger than the outer one ( height: 300px).
In a third step we define a custom animation (@keyframes slide) and add it to the image container (the one with id cahcomiccontent).
If you want to dive deeper to CSS animations i can suggest this page.
