search

gnab / remark

A simple, in-browser, markdown-driven slideshow tool.
http://remarkjs.com
MIT License
12.68k stars 856 forks source link

Images (png) look bigger than real size #178

Closed jmvidalvia closed 9 years ago

jmvidalvia commented 9 years ago

Both 

![](image.png)

and 

<img src="image.png"/>

are showing my images about 30% bigger than their real size, so I need to downsize them manually with, e.g.

<img src="image.png" width="1200px"/>

The problem is that I ignore the exact amount of px to recover the original aspect. I checked all CSS and couldn't find any place where images or div are magnified. Thanks,

gnab commented 9 years ago

If I understand you correctly, this is probably due to the slide scaling in remark. However, when you downsize to 1200px I'm a bit confused, as the dimensions of a remark slide is 908x681 pixels, which is smaller than what you downsize your image to.

Can you please supply your slideshow and image to clearify things?

jmvidalvia commented 9 years ago

I shouldn't have used this example (wide image with a horizontal scrolling bar): please consider any other size, as it really doesn't matter (I checked it). What I understand is that as far as I am using a 1280 x 1024 screen, when I add an image of say 100px, it appears magnified by 1280/908 -> 41%, so I have to set the size down to 100px/1.41=71px Is there any way to avoid this behaviour? BTW, while rescaling the image the size is corrected, but it looks a bit fuzzy, not as the original.

gnab commented 9 years ago

At the moment this is simply how remark works. It scales slides up or down based on the reference dimension 908 x 681. I know that other tools similar to remark offer options for minimum and maximum scaling. In your case, being able to set a max scale of 1.0 would have "fixed" your problem. Then your image would appear in it's actual resolution (no scaling) on resolutions larger than the reference dimensions (including some padding, but that's not the point in this case). On larger resolutions, however, the slides would appear as a little box in the middle of the screen, which is why the current behavior is to scale upwards to fill the available space. To handle this, the reference dimension could of course be configurable as well. Setting the reference dimension should be aligned with setting the ratio using the ratio configuration option in some way, as the two are connected.

Any thoughts on how you think this should work?

jmvidalvia commented 9 years ago

Ok, I understand the problem: I was trying to solve it under html basis, while we are actually in a slideshow framework. I skipped the issue using svg most of the time, but I couldn't find any practical solution to generate vector images from Office documents till now. Thanks!

gnab commented 9 years ago

Glad you worked it out. Closing off this one then! :)