image的mode[scaleToFill、aspectFit、aspectFill、widthFix、heightFix ]使用区别

Koma-forever

已于 2024-05-15 15:44:43 修改

阅读量3.3k

点赞数 3

分类专栏： css 文章标签： css

于 2024-04-03 16:42:47 首次发布

本文链接：https://blog.youkuaiyun.com/www1056481167/article/details/137350618

版权

3 篇文章

订阅专栏

本文详细介绍了HTML/CSS中image元素的mode属性，包括scaleToFill、aspectFit、aspectFill、widthFix和heightFix五种模式，解释了它们如何影响图片的缩放、保持纵横比以及可能的变形或截取情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性名	说明
scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素==> 图片会被拉伸变形, 但不会截取。
aspectFit	保持纵横比缩放图片、使图片的长边能够完全展示出来==> 完整地将图片展示出来、图片不会变形、内容会在容器内居中显示，留给图片的位置是不变的。
aspectFill	缩放模式、保持纵横比缩放图片、只保证图片的短边能够展示出来==> 图片在水平or垂直方向是完整的, 另一个将会发生截取、即会被截取。
widthFix	缩放模式、保持原有图片宽高比,宽度不变高度自动变化==> 图片可完全展示出来高度会跟着图片的比例进行拉伸、一起被撑起来了。
heightFix	缩放模式、高度不变==> 图片可完全展示出来, width设置了也不生效会发现设置了width也是不生效的。