Layout of <img>, <canvas> and <video> for any elements suggestion


#1

Hello. I suggest to add intrinsic sizes for elements, like div, and any custom elements. I think this for CSS. This CSS property will override intrinsic size. This elements can store any content: text, images, canvas, etc. This element will proportionally sized if resize by width or height. I in right don’t know how will default values of these values (except for images).

<div id="img-like"></div>

#img-like {
  intrinsic-width: 300px;
  intrinsic-height: 300px;
}

#2

There’s already the discussion of adding an aspect-ratio property: CSS aspect-ratio proposal


#3

I came across this today (can’t remember how, I was closing tabs), which makes some good points:

E.g.

There’s no way to do media that maintains aspect ratio, is proportional to the width of the screen, and doesn’t cause a user visible reflow. If we provide a way for the author to declare the intrinsic size of the image before the image has loaded, then we could allow them to specify just one dimension (e.g. the width) to a percentage or pixel value and compute the other dimension immediately without waiting for the image to load.

and

if you tried to do this using aspectratio there’s no way for the [intrinsic width] measurement to enter the system… the width will be correct eventually, but only after the image downloads; until then the browser doesn’t know whether it should be the [CSS value], or something less.

Has there been any progress elsewhere?