
Show HN: AspectRat.io – Aspect ratio calculator and device resolutions resource - ryanhefner
https://aspectrat.io
======
qualitytime
Hey, good job.

I tend to look up aspect ratios frequently.

You went full on with a nice web page and domain name hack.

Add more devices (e.g. ipads etc.), video res (vga,etc.) and more mathematical
constants like golden ratio, silver ratio , etc. and add an easy
landscape/portrait toggle switch.

~~~
52-6F-62
> Add more devices (e.g. ipads etc.), video res (vga,etc.) and more
> mathematical constants like golden ratio, silver ratio , etc. and add an
> easy landscape/portrait toggle switch.

I'd like to add: a specs dialog, maybe? Add DPI/HDPI info, recommended DPI for
images, etc. Would make this a for-sure go-to.

Nice work!

~~~
ryanhefner
Thanks! Yeah, definitely going to be adding more devices and common
resolutions.

------
Freak_NL
The site has a bit of Webkit-only CSS. Tip: don't use bleeding edge CSS like
_appearance_ , and if you do, at least test it in Chrome, Edge, and Firefox.

You can fix the broken CSS for Firefox by adding _-moz-appearance_ in addition
to _-webkit-appearance_.

[https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-
appear...](https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance)

~~~
ryanhefner
Whoops, just pushed up a fix. Just threw this together and didn't test it like
I should have. Should be good now.

------
sd8dgf8ds8g8dsg
Not sure why make a whole website of this

    
    
        w := 1900
        h := 1200
        divisor := gcd(w, h)
        aspect := fmt.Sprintf("%d:%d", w/divisor, h/divisor)
    
        func gcd(x, y int64) int64 {
            for y != 0 {
                x, y = y, x%y
            }
            return x
        }

~~~
suprfnk
Because my non-programmer friend can use a website, but not write a program.

~~~
52-6F-62
This. I work in media. Just passed this along to a few designer friends, and
even non-designers who work with magazine design teams and regularly have to
translate images and resize/crop them for mobile and web.

edit: They're already happy to have it in their back pocket.

------
SimeVidas
What’s the use case for the CSS code? The `padding-top` value doesn’t account
for the OS and browser’s chrome (status bar, URL bar, etc.), so the `.inner`
element doesn’t fit into the viewport.

~~~
leddt
For responsive embeds I assume. Where the embedded ".inner" component scales
it's height according to it's width.

~~~
ryanhefner
Yeah, that was the intention. Good to use for placeholder styling until the
image/video has loaded. And for things like responsive embeds/iframes.

~~~
52-6F-62
Maybe add an "about" or "how do I use it?" button with a panel, or a second
page in case anybody is confused?

------
ryanhefner
On Product Hunt today, [https://www.producthunt.com/posts/aspect-
ratio](https://www.producthunt.com/posts/aspect-ratio)!

