![]() ![]() ![]() This ensures that the width cannot grow more than approximately 1.7 times it’s own height (16/9 = 1.778). At the same time we also maximize the width of the container by using max-width: 177.7778vh. To create a 16:9 container that never grows bigger than the viewport we set a height of 56.25vw (note that this is the viewport width unit) and a max-height of 100vh. We can use them to create an aspect ratio box and at the same time maximize the dimensions of the ratio container. ![]() The padding solution isn’t usable in this case. What if our element is the full viewport width and the viewport is really wide and not that high? 1280x500 pixels would then yield a video container of 1280x720, meaning the bottom part of the video would be invisible to the end user. The above ratio trick is a nice solution, however there is a case that this does not yet solve. For a 16:9 ratio we use 56.25% padding (9:16*100) and thus create a container that will always have a 16:9 ratio based on it’s width. An element of 100px width and 50% top padding will yield a block of 100px by 50px. The ‘padding’ trick Thierry wrote about is all about understanding that when specifying an element’s top or bottom padding in percentages, it will derive this value from the width of it’s container. ![]() If we create a container that preserves it’s own aspect ratio (16:9 for video in this case) and put the video in that element we can solve this. For video this does not work, the height needs to have a specific ratio to the width. We all know in responsive websites the width of elements change, and the height will usually change according to it’s contents. There are some scenarios where you might want to preserve the aspect ratio of an element (for example a video). I first read about preserving ratio on elements a long time ago (before responsive design was a thing) when Thierry Koblentz wrote an article about this. Our resulting python code (really simple) and the result look like this. Resize your viewport and let the magic happen. Create a separate function to display this property, which does only one thing replace the symbol with ‘ ’, a.k.a. The trick, define a symbol (we use the pipe sign) to use as a hyphen in headings that need to break on narrow screens. A Javascript solution could work but I like to keep things separated. “So if it’s invisible how do I enter this into my CMS?” I’m bending the rules a bit here by creating a backend dependency, since mutating values is easier to do that way. Bottom line: I’ve never seen it work flawlessly across the browser spectrum as of yet. Depending on your page’s language your mileage may vary though. “Browsers should auto-hyphen right?” There is actually a CSS spec for this, but it relies on a dictionary and Chrome on desktop does not support auto hyphens. Hyphens are always visible, also on bigger screens. “Well then just use hyphens” is the designers answer. That’s not a whole lot and there are a lot of words longer than this. Given a font size of 40 pixels (not even that big) and a 20 pixels margin on both sides you can get about 13 characters on one line. This is still a common resolution for phones so you need to match your design to accommodate this width as a minimum. It does however create quite some problems on screens that have a viewport of 320px wide. This is primarily a design/readability thing, so no arguing there. Even though the screens of mobile phones are small, somehow the headings and texts are always relatively large for the device. ![]()
0 Comments
Leave a Reply. |