If we have an image with intrinsic dimensions of 300px by 300px, the image's content box is also 300px by 300px. If we change the image dimension via CSS to, say, 300px by 200px, the image will appear distorted.
img {
height: 300px;
width: 200px;
}
I'm wondering what, technically, is happening here. Is the CSS sizing the content box, the image, or both?
I'm going to stick my neck out here and suggest that the CSS is styling the content box, and that the image, by default, is fitting into that box. I'm assuming this because fill is the default for object-fit. If we set object-fit: cover to the image, the image will no longer be distorted (some of it being hidden outside the bounds of the content box), but the dimensions of 300px by 200px still apply to the content box.
I haven't been able to find an answer to this in the specs. Is anyone able to point me in the right direction, or suggest an answer? Please feel free to set me straight on any flawed thinking or terminology!
Your thinking is spot on. Images are not special in this regard. The sizing properties, height, width, min- and max- variants and their flow-relative counterparts all are applied to the content box when box-sizing:content-box applies, and to the border box when box-sizing:border-box applies.
The image is then rendered in the content box as you describe.
So the relevant specification is the box-sizing property