How tall would the image be




















The limitations for responsive images have been known for a long time and many workarounds, including the so-called padding-bottom hack , have been created to work around the issue. This uses the fact that padding percentages including padding-bottom are always based on the container width to ensure a consistent padding even if height and width differ. This fact can therefore be used to create a container with where the height is set based on a ratio of the width.

The issue has been tackled from a few different directions by a number of different standards organizations. This would tackle the complexity problem issue 2 once it becomes available, and simplify the above code to just this:.

Much nicer! This is particularly useful for video where we usually have a set number of commonly used aspect-ratios, so we could create a few classes like above for each size. Separate to this, the Web Incubator Community Group WICG — a group of browser developers and other interested parties that can experiment on technologies to see if they work before formal standardisation — also created a proposal to fix this. They proposed the intrinsicsize attribute, that would look like this:.

As this is an HTML attribute, it can be set per image solving issue 1 , and is relatively easy to code solving issue 2 , but was still likely to suffer from adoption issues issue 3 unless it became very well-known with a big push from the whole community. And that is where the now seemingly obvious! Jen Simmons proposed this elegant, and simple solution , that she had come up with, along with fantasai :.

Rather than hard-coding the aspect-ratio , this uses the attr CSS function to create the appropriate aspect-ratio based on the image width and height attributes provided by the HTML. If attr was able to be used for the well-known width and height attributes from img elements, then it could use be used to automatically calculate the aspect-ratio as per above.

This would solve issue 1 no hard-coded aspect ratio needs to be set in the HTML nor the CSS , issue 2 very simple to add and, as we shall see, there is a very simple answer to issue 3 adoption. Basically, this solution means if the following four conditions are true, then the correct image dimensions could be calculated without needing to wait for the images to download, and so without the need of a content layout shift:. If any one of these were not set, then the calculation would not be possible, and so would fail and be ignored and have to wait for the image to be downloaded.

As mentioned above, this is also something many web developers may have already assumed was happening anyway. Because this is just a CSS attribute, the proposal contained a further twist — it could be added to the user-agent stylesheet used by browsers so would not even require any changes from web developers to benefit from this. The user-agent stylesheet is where default CSS definitions are set e. However, this does depend on the attr function having access to the width and height HTML attributes, and also the upcoming aspect-ratio CSS property to be completed — neither of which has happened yet.

So instead, as an easier fix, the browsers could implement the equivalent logic deep in rendering code rather than exposing it via the user-agent stylesheet, but the effect is the same. This alternative implementation approach was even suggested as part of the proposal. Firefox went ahead and did this as an experiment and then turned it on by default for Firefox Once that was released, then your site may well have just got faster for free — thanks Mozilla!

Maybe in future, they will move this to the user-agent stylesheet method, but for now, this is sufficient and perhaps more performant? When introducing a change in behavior, there is always a concern about backwards compatibility and this feature was no different.

In theory, as long as the four attributes were appropriately set, there should be no breakage with this. However, when Firefox initially experimented with it, they discovered problems for those setting the width and height incorrectly in their HTML. Whereas previously these incorrect values would be ignored if the CSS overrode them, now they were being used when auto was set and the images were not displayed correctly and led to squished or stretched images.

The solution to that problem, however, was relatively simple: have the actual image aspect-ratio of the image override any CSS calculated aspect-ratio. This way the incorrectly calculated aspect-ratio can be used for initial layout, but then can be recalculated when the image is downloaded, so the image is displayed as it was before.

This also took care of the other chromium-based browsers Edge, Opera and Brave, for example. More recently, in January , Apple added it to their Tech Preview edition of Safari , meaning it should hopefully be coming to the production version of Safari soon, and with that, the last of the major browsers will have implemented this and the web will become better and less jolty for a huge number of sites. The fix works great to calculate the aspect-ratio based on a fixed width and height , but what about when those change?

This is known as art direction and an example is shown below:. In this case we are using a wide image for desktop, and then a square, cropped image for mobile. Adding these has been proposed but until then, this is currently a limitation of the solution, and using images with different dimensions will still experience a layout shift.

This feature would be perfectly suited for use with lazy-loading. Ideally, all lazy-loaded images are loaded off-screen as you scroll down the page before the lazy-loaded image enters the viewport, but often this is not the case depending on how fast the user scrolls and the network, so having the image area correctly set would at least avoid the layout shift after loading does occur.

Additionally, even when loading is happening off-screen, layout shifts can be costly in terms of CPU time, as we have shown above. Though if the CSS version of this solution becomes available, then website developers will have greater control over specifying aspect-ratio themselves. Native lazy loading was recently released by the Chrome team and it has since been added to the HTML spec. Other browsers are also looking to support this with Firefox also getting this soon , and Safari hopefully not too much later.

Well, unfortunately, I discovered this height and width solution is not compatible with the recently released native lazy-loading functionality as can be seen on this test page. Update: This was fixed in Chrome For example, if you need 3. Without a single point of reference for everything, or if they're all on different scales, you would need a lot more information than you could easily get without having been there. Or perhaps, we could use the EXIF data to reverse engineer the size of the object based on the camera's sensor dimensions, the lens and the focal length used.

This again depends on the angle. We should be getting most accurate results when the camera has been held perpendicular to the subject. Stack Overflow for Teams — Collaborate and share knowledge with a private group.

Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. How would you find the height of objects given an image? Ask Question. Asked 11 years, 6 months ago. Active 2 years, 11 months ago. Viewed 46k times.

Gaurav Gandhi 2, 2 2 gold badges 24 24 silver badges 37 37 bronze badges. Laz Laz 5, 9 9 gold badges 37 37 silver badges 53 53 bronze badges. If the photo is the only input you have, it can't be done. Consider a bonsai tree photographed from a close distance, versus a full-sized tree photographed from further away If you get the date and location from the exif then all you need to do is some shadow detection.

Then you'll have everything to calculate the height by using the Pythagorean theorem. Jim Lewis-- does the photo have associated metadata, like lens information and focal length? Because if you know the distance to the trees from that, and the pixel-to-inches or feet, or whatever , then it's a matter of separating the trees from background. Then from there you can use that exact height as a comparison to the trees. You need something in the photo that you can get the size to fairly accurately.

I'm not sure of the math, but there's an iPhone app that uses a credit card in the picture to estimate the sizes of objects in the scene. Maybe something like that will help you Show 1 more comment. Active Oldest Votes. Neil N Neil N I don't see where that comes even close to an answer im afraid.

Add a comment. But see i'm not looking for exact height or anything. I just want relative heights of objects. Taken relative to anything0you wish. How do i measure it in a pic? Did you look at the document I referenced? It has that exact application. For this we need to know two things, the distance between the camera and the image plane distance from camera to object. Focal-length in mm and pixels per mm or physical size of the image sensor. Find the dimension of the image height1Xwidth1 Find the Object size in pixels Determine the size of object in pixels.

Tarka Tarka 3, 2 2 gold badges 19 19 silver badges 33 33 bronze badges. I would rely on an object of known dimensions to be present in the picture. For instance, a man. A man is not of known dimensions. Unless you know he's standing and his standing height. But how would you isolate each object? So you will get the result in Mb.

AdnanTufail AdnanTufail 1. Sign up or log in Sign up using Google. Sign up using Facebook.



0コメント

  • 1000 / 1000