img类似于行块盒,盒模型中所有尺寸都生效的。
注意点:
1.若只设置了一个尺寸(或者高度),则另一个尺寸会根据比例会自适应。
2.图片的适应方式设置属性为object-fit
object-fit:contain //即保证图片宽高比例,但不能溢出。
:fill // 默认值,会填充满区域,但是不保证比例。
:cover // 填充满区域,同时保证比例,会牺牲一些图片信息。
3.object-fit同样适用于video标签。
img类似于行块盒,盒模型中所有尺寸都生效的。
注意点:
1.若只设置了一个尺寸(或者高度),则另一个尺寸会根据比例会自适应。
2.图片的适应方式设置属性为object-fit
object-fit:contain //即保证图片宽高比例,但不能溢出。
:fill // 默认值,会填充满区域,但是不保证比例。
:cover // 填充满区域,同时保证比例,会牺牲一些图片信息。
3.object-fit同样适用于video标签。