Hacker News Reader

Comment by onion2k | Hacker News Reader

The width and height of an image set in a CSS file can be in any valid CSS unit. That's pixels, or em, or a percentage, or viewport units (vw and vh for 1% of the width or height, vmin or vmax for 1% of the shortest or longest side), or real world units like mm (only works on high DPI screens). Support varies.

Eg setting an image to be "width: 100vw; height: 100vh;" means it'll be squished to fill the user's viewport. "width: 100vw; height: auto;" will fill the viewport horizontally and scale the image vertically as per it's aspect ratio. And so on. Generally that'll look bad though because browsers scale things fast rather than well.

And then there's the options for background images. "background-size: cover" is quite useful.

CSS is fun.

View on HN

In many cases you want to set one size and let the other calculate itself based on the aspect ratio of an image. And this is not know prior to loading and can't be specified in any other way. So you get jumpy behavior during load on most responsive websites and slow connections. It's hard to fix in JS too.

If only there was a way to know the aspect ratio of an image at the time of website authoring...

I personally dislike the complexity of having to use the server-side calculated dimensions.

``` object-fit: cover ```

comes to mind as a client-side solution I used in the past for this problem

There are such things as dynamically sourced, or generated, images. On-the-fly-computed SVG data visualisations might be such a case.

Generally, I'd agree that authoring time is some 9X% solution, though there remain edge cases.

You'd still want those at a fixed size though?

I can't think of a good use case for auto generating arbitrarily large images, and as a user I wouldn't want to visit websites where the web designer thinks that's a good idea either.

Usually, yes, though posibly not in all cases. With SVG and CSS/JS, the size could be dynamic as the paage is being viewed, depending on user behaviour or other conditions

What thos cases are is ... a good question, and my point is more thaat this can be done than to say why or that it's a good idea.

Upshot again is that image size need not be deterministic at authoring time.

Doesn't help if you try to do max-width: 100% in CSS. You'll get an image with a height you set in HTML and a smaller width.

But wouldn't that require people to know what they're putting on their web site?

Yes, and that's exactly what Firefox's new scrolling anchoring tries to fix.

Reply on news.ycombinator.com