替换元素的尺寸计算规则

本文为学习《CSS世界》第 4 章后所作笔记。

内联替换元素和块级替换元素使用同一套尺寸计算规则。

尺寸有 3 种:固有尺寸、HTML 尺寸、CSS 尺寸

这几种尺寸是有优先顺序的:CSS 尺寸 >  HTML 尺寸> 固有尺寸,比如说 CSS 尺寸会覆盖 HTML 尺寸。

图片资源的固有尺寸是无法改变的。

可以通过改变 object-fit 属性值改变 <img> 元素适配 HTML 尺寸和 CSS 尺寸的方式。

例子:

<img> 是替换元素,现在有一张图片 1.jpg,它的原始尺寸是 605 x 311,这个 605 x 311 就是 1.jpg 的固有尺寸

将图片引入,显示的是原始尺寸

现在在 HTML 标签上给设置 width 为 200px,显示的尺寸就变成 width、height 为 200px,这个在 HTML 标签里设置的 width 跟 height 就叫 HTML 尺寸。

HTML 尺寸覆盖掉了固有尺寸。

图片资源的固有尺寸是无法改变的,这里相当于在图片外侧画了个固定尺寸的 200x200 的矩形,让图片去拉伸填充这个矩形。

现在给设置样式,width 设置为 300px,这个叫 CSS 尺寸

CSS 尺寸覆盖掉了 HTML 尺寸、固有尺寸

对于某些替换元素而言,如果没有设置尺寸,那么最终宽 300 px 高 150 px

按照规范,如果 <img> 没有设置尺寸,宽高应该是 300x150,但实际上在 Chrome 中是 0x0,在 IE 中是 28x30

     

原文地址:https://www.cnblogs.com/xiaoxuStudy/p/13764953.html