Imagine we have an image that is originally sized at 300px by 300px. In this case, the image's content box matches those dimensions as well. However, if we adjust the image size using CSS to be, for example, 300px by 200px, the image will end up looking distorted.
img {
height: 300px;
width: 200px;
}
I'm curious about what exactly is occurring here from a technical standpoint. Is the CSS styling applied to the content box, the image itself, or both?
My thinking is leaning towards the idea that the CSS affects the content box, with the image automatically adjusting to fit within it. This assumption is based on the fact that fill is typically the default setting for object-fit. By changing the object-fit property to cover, the image remains undistorted (albeit with some parts extending beyond the content box), while still adhering to the dimensions of 300px by 200px.
After scouring through the specs, I haven't found a definitive answer to this query. Could someone direct me to the appropriate resources or propose a solution? Feel free to correct any misconceptions or terminology errors!