Handy "formulas": ratio = W / H → W = H * ratio → H = W / ratio Turned out pretty short and straightforward imo, just wanted to share it. Here's a solution I came up with when having to deal with this problem. if original_width * designer_height > designer_width * original_heightĭesigner_height = (designer_width * original_height) / original_widthĭesigner_width = (designer_height * original_width) / original_height Make sure your integers have the range to handle the maximum width*height. Here's a rearrangement of the formula to be more integer friendly. Often you'll be working with integer coordinates, but the divisions to produce the ratios above need to be floating point. original_ratio = original_width / original_heightĭesigner_ratio = designer_width / designer_heightĭesigner_height = designer_width / original_ratioĭesigner_width = designer_height * original_ratio In other words, the new size should fill the designer space in one direction while shortening the size in the other direction to retain the original aspect ratio. If I'm interpreting your spec correctly, you want a result that is no larger than the one the end-user laid out originally you want one of the two dimensions to shrink, and the other to stay the same. That's OK, but how could I make the algorithm smarter and not bother the user by asking which dimension the recalculation should be based on? The user chooses "Smart Size from width" and the new size becomes ~200x150 since the original aspect ratio is ~1.333 For example: A picture is displayed as 200x200 on the designer but the original image is 1024x768 pixels. The user chooses the method and the algorithm adjusts the size of the picture by using the original aspect ratio. The quick way to solve this is to actually provide two options: 1) scale from width 2) scale from height. To help the user with image sizing I am thinking of implementing a smart resizer function which would allow the the user to easily fix the aspect ratio of the picture so that it no longer appears stretched. Since the spec calls for the image to be "stretched" to the containing control, the end user can end up with an awkwardly stretched image.
We can make that tag the aspect ratio box and apply the lockup as a background image.I have an application in which end-users can size and position images in a designer. It’s for the title of an article, so it makes sense to use an tag. If the width changes, so does the height, and the element keeps that aspect ratio. Now we have a friendly aspect ratio box, that works well in fluid width environments. Now imagine instead of 100% top padding, we used 56.25%. Then padding will be the only part of the box model affecting the height, and we’ll have our square. If we force the height of the element to zero ( height: 0 ) and don’t have any borders. Isn’t that a perfect square, 500px × 500px? Yes, it is! An aspect ratio! So if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px. This isn’t a hack, but it is weird: padding-top and padding-bottom is based on the parent element’s width. The Core Concept: padding in percentages is based on widthĮven when that is a little unintuitive, like for vertical padding. Let’s go on a little journey through this concept, as there is plenty to talk about. I think the original credit goes as far back as 2009 and Thierry Koblentz’s Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave’s Ol’ Padded Box. I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes.
0 kommentar(er)
