在高度(height)和宽度(width)都确定的情况下怎么让图片不变形
程序员文章站
2022-03-03 12:46:48
在高度(height)和宽度(width)确定的情况下,如果想让图片不变形,可以试一下 img 的 object-fit 这个属性值描述fill默认,不保证保持原有的比例,内容拉伸填充整个内容容器。contain保持原有尺寸比例。内容被缩放。cover保持原有尺寸比例。但部分内容可能被剪切。none保留原有元素内容的长度和宽度,也就是说内容不会被重置。scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于...
在高度(height)和宽度(width)都确定的情况下,如果想让图片不变形,可以试一下 img 的 object-fit 这个属性
值 | 描述 |
---|---|
fill | 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。 |
contain | 保持原有尺寸比例。内容被缩放。 |
cover | 保持原有尺寸比例。但部分内容可能被剪切。 |
none | 保留原有元素内容的长度和宽度,也就是说内容不会被重置。 |
scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。 |
我一般的话都会使用cover这个值,你可以都试一下,看看哪个更适合你的使用场景
本文地址:https://blog.csdn.net/qq_39617948/article/details/110236941