Open anjia opened 5 years ago
今天,和大家聊聊 CSS 是如何确定图像的显示大小的。
先来看个例子,热热身。
上面这张图像的原始尺寸是:宽 54px 高 49px。 那么,在以下代码中,每张图像显示的最终尺寸是多少?
https://p1.ssl.qhimg.com/t01068da1826ad05875.png 是该图片的 url
图像由<img src="">指定,代码如下:
<img src="">
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png"> <img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30" height="30"> <img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30"> <img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" height="30">
图像由background-image指定,代码如下:
background-image
<style> .img { display: inline-block; background-color: #eee; background-image: url('https://p1.ssl.qhimg.com/t01068da1826ad05875.png'); background-repeat: no-repeat; background-size: auto; /*auto 是默认值*/ } </style> <span class="img" style="width: 100px; height: 100px;"></span> <span class="img" style="width: 30px; height: 30px;"></span> <span class="img" style="width: 30px; height: 30px; background-size: 10px 10px;"></span> <span class="img" style="width: 30px; height: 30px; background-size: contain;"></span> <span class="img" style="width: 100px; height: 100px; background-size: cover;"></span>
以上 9 道题,你都答对了吗?
为了方便讨论,我们先来认识四个术语:
width
height
background-size
通常情况,计算图像大小的默认过程是:
初听起来有些绕,我们用刚才提到的例子具象下这个过程。
光栅图像是有三个固有尺寸的。以开头给出的 Logo 图像为例,它的固有尺寸分别是:
<img>
我们先来看用<img src="">指定的那四个:
demo1.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png">
没有指定大小,那就用固有尺寸。所以,最终显示的尺寸是宽 54px,高 49px
demo2.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30" height="30">
有指定的宽和高,所以,最终显示的尺寸是宽 30px,高 30px
demo3.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" width="30">
只有一个指定的宽,那就用固有宽高比计算出高来。所以,最终显示的尺寸是宽 30px,高 30/(54/49)=27.22px
demo4.
<img src="https://p1.ssl.qhimg.com/t01068da1826ad05875.png" height="30">
只有一个指定的高,那就用固有宽高比计算出宽来。所以,最终显示的尺寸是宽 30*(54/49)=33.06px,高 30px
以上四个示例的 UI 依次是:
接下来,看用background-image指定的五个。
在这个上下文里,背景区域的大小即图像的默认对象大小,background-size属性提供指定大小。
background-size有两个关键字contain和cover,它们分别对应包含约束和覆盖约束。
contain
cover
<span class="img" style="width: 100px; height: 100px;"></span>
auto是background-size的默认值,意思是按图像的固有尺寸来,所以最终显示的尺寸是宽 54px,高 49px
auto
<span class="img" style="width: 30px; height: 30px;"></span>
同上,auto按图像的固有尺寸来,所以最终显示的尺寸是宽 54px,高 49px
<span class="img" style="width: 30px; height: 30px; background-size: 10px 10px;"></span>
这里background-size: 10px 10px给出了具体的指定大小,所以最终显示显示的尺寸就是宽 10px,高 10px
background-size: 10px 10px
<span class="img" style="width: 30px; height: 30px; background-size: contain;"></span>
根据contain的含义,包含约束要在背景框里尽可能的大。背景框宽 30px 高 30px,图像固有宽 54px 固有高 49px,所以包含约束取宽 30px,高根据固有宽高比算出来 30/(54/49)=27.22px,也就是指定大小是宽 30px 高 27.22px。对于背景区域未覆盖到的地方将会用背景色来填充。所以最终显示的尺寸是宽 30px 高 27.22px。
demo5.
<span class="img" style="width: 100px; height: 100px; background-size: cover;"></span>
根据cover的含义,覆盖约束要在大于等于背景框的前提下尽可能的小。背景框宽 100px 高 100px,图像固有宽 54px 固有高 49px,所以覆盖约束取高 100px,宽根据固有宽高比算出来 100*(54/49)=110.20px,也就是指定大小是宽 110.20px 高 100px。 对于超出背景区域的部分,会被裁切掉,所以最终显示的尺寸是宽 100px 高 100px。
以上五个示例的 UI 依次是:
CSS Images Module Level 3
示例,在线预览:https://codepen.io/anjia/pen/jXYmmv
今天,和大家聊聊 CSS 是如何确定图像的显示大小的。
热热身
先来看个例子,热热身。
上面这张图像的原始尺寸是:宽 54px 高 49px。 那么,在以下代码中,每张图像显示的最终尺寸是多少?
图像由
<img src="">
指定,代码如下:点击查看:显示的尺寸依次是...
图像由
background-image
指定,代码如下:点击查看:显示的尺寸依次是...
确定图像大小的过程
为了方便讨论,我们先来认识四个术语:
width
height
background-size
中的一个或多个指定的通常情况,计算图像大小的默认过程是:
初听起来有些绕,我们用刚才提到的例子具象下这个过程。
光栅图像是有三个固有尺寸的。以开头给出的 Logo 图像为例,它的固有尺寸分别是:
<img>
我们先来看用
<img src="">
指定的那四个:demo1.
没有指定大小,那就用固有尺寸。所以,最终显示的尺寸是宽 54px,高 49px
demo2.
有指定的宽和高,所以,最终显示的尺寸是宽 30px,高 30px
demo3.
只有一个指定的宽,那就用固有宽高比计算出高来。所以,最终显示的尺寸是宽 30px,高 30/(54/49)=27.22px
demo4.
只有一个指定的高,那就用固有宽高比计算出宽来。所以,最终显示的尺寸是宽 30*(54/49)=33.06px,高 30px
以上四个示例的 UI 依次是:
background-image
接下来,看用
background-image
指定的五个。在这个上下文里,背景区域的大小即图像的默认对象大小,
background-size
属性提供指定大小。background-size
有两个关键字contain
和cover
,它们分别对应包含约束和覆盖约束。demo1.
auto
是background-size
的默认值,意思是按图像的固有尺寸来,所以最终显示的尺寸是宽 54px,高 49pxdemo2.
同上,
auto
按图像的固有尺寸来,所以最终显示的尺寸是宽 54px,高 49pxdemo3.
这里
background-size: 10px 10px
给出了具体的指定大小,所以最终显示显示的尺寸就是宽 10px,高 10pxdemo4.
根据
contain
的含义,包含约束要在背景框里尽可能的大。背景框宽 30px 高 30px,图像固有宽 54px 固有高 49px,所以包含约束取宽 30px,高根据固有宽高比算出来 30/(54/49)=27.22px,也就是指定大小是宽 30px 高 27.22px。对于背景区域未覆盖到的地方将会用背景色来填充。所以最终显示的尺寸是宽 30px 高 27.22px。demo5.
根据
cover
的含义,覆盖约束要在大于等于背景框的前提下尽可能的小。背景框宽 100px 高 100px,图像固有宽 54px 固有高 49px,所以覆盖约束取高 100px,宽根据固有宽高比算出来 100*(54/49)=110.20px,也就是指定大小是宽 110.20px 高 100px。 对于超出背景区域的部分,会被裁切掉,所以最终显示的尺寸是宽 100px 高 100px。以上五个示例的 UI 依次是:
总结
width
height
background-size
background-size
<img>
时,也有个相应的属性可以调整图像大小,即 object-fit参考
CSS Images Module Level 3