Hacker News Reader

Comment by onion2k | Hacker News Reader

I think you're being sarcastic, but if not and for anyone who isn't aware, setting the width and height on an <img> tag (or it's associated style) will do this.

View on HN

I think you're also being sarcastic :) Websites did this 15 years ago (miss the HTMLX compliant button at the bottom of the page), and now in large part do not.

I made my first website 22½ years ago. Even as a raw beginner, I knew it was considered sloth and Very Bad Form Indeed not to specify image size in my markup.

Everything that is standard recommended practice in modern web design is Very Bad From, whether or not it is sloth.

"Oh wow, 22 years ago! This guy must be... my... age... Shit."

This would be a great solution, if everybody used the same screen size.

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.

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.

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

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.

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

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.

Not sure why you're downvoted. It's a real problem. It would help if it would be possible to set an aspect ratio on the img tag, so that when it's scaled via CSS or whatever, it would maintain the aspect ratio of the loaded image despite it not being loaded yet.

It's possible and well-known: https://css-tricks.com/aspect-ratio-boxes/. Also, for images, there is the simpler solution of specifying real width/height in the img tag, then use CSS with "max-width: 100%; height: auto" or anything similar.

It doesn't work in chrome. Try (test.png doesn't exist):

  <img width="100" height="100" style="width:100%;height:auto;" src=test.png>

and you'll get 16x16px placeholder image. In Firefox, it works.

It would be nice if we could have a ratio rule in CSS for all block elements, so adjusting one dimension would automatically alter the other, preserving the ratio at all screen sizes. e.g.:

    width: 2000px;
    max-width: 100%;
    ratio: 16/9;

Of course this gets tricky when width and height are both specified and they don't match the given ratio, but that just means that one needs to always override the other.

Edit to add: Or maybe it would be better to just have the ability to lock the ratio, such as:

    ratio: fixed;

Aspect Ratio is coming in CSS4. https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-c...

This pleases me.

To be honest, if you know one dimension and the aspect ratio, you're more likely to know both dimensions.

Well, the thing is with `width: 9000px; max-width: 100%;` is that you know neither. And it forces people to use silly things like `padding` to maintain aspect ratio in e.g. embedded videos.

You (or others) may or may not know it is already possible in CSS as it is. To force 16:9:

  .DamnInteresting {
    position: relative;
    display: block;
  }

  .DamnInteresting::before {
    content: '';
    display: block;
    /* 16:9 shim! */ 
    padding-bottom: 56.25%;
  }

  .DamnInteresting img {
    position: absolute;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
  }

Ugly, but it's easy to make a mixin (or similar) if you're using a preprocessor!

(The ::before element isn't stricly necessary; the padding can go on the .DamnInteresting element directly - just make sure .DamnInteresting is wrapped in a containing element of your desired width and you can even use inline styles for the padding shim.)

(Edit: a word)

Reply on news.ycombinator.com