Show HN: AspectRat.io – Aspect ratio calculator and device resolutions resource

Show HN: AspectRat.io – Aspect ratio calculator and device resolutions resource(aspectrat.io)

35 points by ryanhefner 8 years ago | 33 comments

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 8 years ago | |

> 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 8 years ago | | |

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

Freak_NL 8 years ago |

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...

ryanhefner 8 years ago | |

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

sd8dgf8ds8g8dsg 8 years ago |

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 8 years ago | |

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

52-6F-62 8 years ago | | |

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.

ryanhefner 8 years ago | | |

Exactly.

johnhenry 8 years ago | |

Worth mentioning that the page makes it explicit that it uses this library: https://github.com/ryanhefner/calculate-aspect-ratio/blob/ma...

ryanhefner 8 years ago | |

Yeah, this is really more of a reference and a tool when you’re comparing sizes and confirming they are the same aspect ratio without having to use code. There’s also an NPM module that will do the code part if you need to go that route.

nottorp 8 years ago | |

He/she/it hasn't heard of 1920x1200 :) All those devices are 16:9 i think?

ryanhefner 8 years ago | | |

Yeah, I need to beef up the devices/resolutions listing. What device(s) have 1920x1200?

stephenr 8 years ago | |

Have an upvote.

The limit on ridiculous things people will somehow make into a "web service" knows no bounds.

ryanhefner 8 years ago | | |

Thanks. Yeah, not really a "web service", just a reference tool, along with an NPM module you can use.

Also, I’ll be extending the device/resolutions listing, so hopefully it can be a handy reference for designers/developers.

SimeVidas 8 years ago |

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 8 years ago | |

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

ryanhefner 8 years ago | | |

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

SimeVidas 8 years ago | | |

But why are the aspect ratios based on popular smartphone screens? Notice how on the website, you select a smartphone model, and then the button on the right shows CSS code for creating an aspect ratio that matches that smartphone’s screen. What’s the use case of having an element whose aspect ratio mimics that of popular smartphone screens?

ryanhefner 8 years ago |

On Product Hunt today, https://www.producthunt.com/posts/aspect-ratio!

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 }