英文:
Understanding the relationship between an image and its content box
问题
如果我们有一张内在尺寸为300px x 300px的图像，那么图像的内容框也是300px x 300px。如果我们通过CSS将图像的尺寸更改为300px x 200px，那么图像将会出现变形。
我想知道在技术上这里发生了什么。CSS是在调整内容框、图像还是两者同时进行？
我敢大胆猜测，CSS是在调整内容框，而图像默认情况下适应该框。我之所以这么认为，是因为object-fit的默认值是fill。如果我们将object-fit: cover应用于图像，图像将不再变形（部分内容被隐藏在内容框的边界之外），但仍然会应用于内容框的尺寸300px x 200px。
我在规范中没有找到答案。是否有人能够指导我正确方向，或提供答案？请随时纠正我可能存在的错误思维或术语用法！
英文:
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!
答案1
得分: 1
你的思路是正确的。在这方面，图像并不特殊。当应用box-sizing: content-box时，尺寸属性，高度，宽度，最小和最大变体以及它们的流相对应变体都应用于内容框，当应用box-sizing: border-box时，则应用于边框框。
然后，正如你所描述的，图像在内容框中呈现。
因此，相关的规范是box-sizing属性。
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论