欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在高度(height)和宽度(width)都确定的情况下怎么让图片不变形

程序员文章站 2022-06-16 12:26:46
在高度(height)和宽度(width)确定的情况下,如果想让图片不变形,可以试一下 img 的 object-fit 这个属性值描述fill默认,不保证保持原有的比例,内容拉伸填充整个内容容器。contain保持原有尺寸比例。内容被缩放。cover保持原有尺寸比例。但部分内容可能被剪切。none保留原有元素内容的长度和宽度,也就是说内容不会被重置。scale-down保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于...

在高度(height)和宽度(width)都确定的情况下,如果想让图片不变形,可以试一下 imgobject-fit 这个属性

描述
fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

我一般的话都会使用cover这个值,你可以都试一下,看看哪个更适合你的使用场景

本文地址:https://blog.csdn.net/qq_39617948/article/details/110236941

相关标签: css html