5 ms·

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

by ezekg 8y ago

onion2k 8y ago
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.
- megous 8y ago
  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.
  - onion2k 8y ago
    Yes, and that's exactly what Firefox's new scrolling anchoring tries to fix.
  - wongarsu 8y ago
    If only there was a way to know the aspect ratio of an image at the time of website authoring...
    - ressetera 8y ago
      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
    - dredmorbius 8y ago
      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.
      - benj111 8y ago
        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.
        dredmorbius 8y ago
        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.
    - phkahler 8y ago
      But wouldn't that require people to know what they're putting on their web site?
    - megous 8y ago
      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.
megous 8y ago
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.
- vbernat 8y ago
  It's possible and well-known: https://css-tricks.com/aspect-ratio-boxes/ 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.
  - megous 8y ago
    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.
DamnInteresting 8y ago
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;
- onion2k 8y ago
  Aspect Ratio is coming in CSS4. https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/ https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-c...
  - DamnInteresting 8y ago
    This pleases me.
- aargh_aargh 8y ago
  To be honest, if you know one dimension and the aspect ratio, you're more likely to know both dimensions.
  - runarberg 8y ago
    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.
- lewiscollard 8y ago
  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)

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

by ezekg 8y ago

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.

megous 8y ago
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.
- onion2k 8y ago
  Yes, and that's exactly what Firefox's new scrolling anchoring tries to fix.
- wongarsu 8y ago
  If only there was a way to know the aspect ratio of an image at the time of website authoring...
  - ressetera 8y ago
    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
  - dredmorbius 8y ago
    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.
    - benj111 8y ago
      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.
      - dredmorbius 8y ago
        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.
  - phkahler 8y ago
    But wouldn't that require people to know what they're putting on their web site?
  - megous 8y ago
    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.

megous 8y ago

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.

vbernat 8y ago
It's possible and well-known: https://css-tricks.com/aspect-ratio-boxes/ 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.
- megous 8y ago
  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.

DamnInteresting 8y ago

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;

onion2k 8y ago
Aspect Ratio is coming in CSS4. https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/ https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-c...
- DamnInteresting 8y ago
  This pleases me.
aargh_aargh 8y ago
To be honest, if you know one dimension and the aspect ratio, you're more likely to know both dimensions.
- runarberg 8y ago
  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.
lewiscollard 8y ago
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)