6 ms·
Show HN: AspectRat.io – Aspect ratio calculator and device resolutions resource
- SimeVidas 9y agoWhat’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 9y agoFor responsive embeds I assume. Where the embedded ".inner" component scales it's height according to it's width.
- ryanhefner 9y agoYeah, 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 9y agoMaybe add an "about" or "how do I use it?" button with a panel, or a second page in case anybody is confused?
- SimeVidas 9y agoBut 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 9y agoIf you happen to have a product video in your site that has been formatted for a specific phone, you can make sure the container of the video is set as the same aspect ratio of the phone. I also see the CSS as an add-on, the devices for me are more for reference, but I have used the CSS here and there for some of the Apple phones.
- sd8dgf8ds8g8dsg 9y agoNot 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 }
- stephenr 9y agoHave an upvote. The limit on ridiculous things people will somehow make into a "web service" knows no bounds.
- ryanhefner 9y agoThanks. 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.
- stephenr 9y agoThe upvote was for `sd8dgf8ds8g8dsg` > just a reference tool, along with an NPM module you can use. Why does ~6 lines of basic logic need an NPM module?
- ryanhefner 9y agoYeah, probably doesn't. I just found myself using it across a couple different projects and seemed like it would be easier than having to copy and paste it everywhere. Also, it has a command line tool that you can use to get the aspect ratio from width/height. So, not just the code.
- nottorp 9y agoHe/she/it hasn't heard of 1920x1200 :) All those devices are 16:9 i think?
- 9y ago
- Freak_NL 9y agoThe 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-appearance https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appear...
- ryanhefner 9y agoWhoops, just pushed up a fix. Just threw this together and didn't test it like I should have. Should be good now.
- qualitytime 9y agoHey, 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 9y 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 9y agoThanks! Yeah, definitely going to be adding more devices and common resolutions.
- ryanhefner 9y agoOn Product Hunt today, https://www.producthunt.com/posts/aspect-ratio https://www.producthunt.com/posts/aspect-ratio!