css——图片缩放,拉伸,变形的解决办法
你的图片即将变得超级丝滑
- 图片为什么会拉伸变形?
- 怎么解决?
- css的object-fit属性
- object-fit属性有什么用
- 介绍一下object-position
- 举个小栗子
图片为什么会拉伸变形?
前端布局时,图片会出现拉伸、缩放和变形的原因可能有多种:
1.例如图片的尺寸与容器不匹配
2.设置了错误的样式属性
3.浏览器压缩比如像这样:
怎么解决?
通过调整图片的尺寸、使用样式属性或使用背景图等方式来解决。
如果图片拉伸、缩放或变形是由于浏览器压缩造成的,可以使用响应式图片或使用压缩技术来解决。
还有一些其他的解决方案,根据具体情况而定。
今天着重介绍css方法解决,那就是object-fit
属性
css的object-fit属性
排列宽高不同,比例不同的图片,很容易破坏页面布局 。
如果此时给图片高度,图面会拉伸变形,巨丑。
这种情况下,我们可以使用object-fit
属性
cover
可以确保图片按原始宽高比例进行缩放,超出容器的部分会被裁剪掉
和object-fit
配合的还有一个object-position
属性 它可以指定图片显示的位置
object-fit属性有什么用
- 调整容器中的图片或视频大小,以适应容器的尺寸。
- 控制图片或视频的位置,以便让它们在容器中居中或者对齐到左上角、右上角、左下角或右下角等位置。
- 避免图片或视频在容器中变形或拉伸。
object-fit
适用于需要在固定尺寸的容器中展示图片或视频的场景。
例如:网站的相册、产品展示页面、视频播放器等。
使用object-fit
非常简单,只需要在图片或视频的样式中添加object-fit
属性,并设置其值为contain、cover、fill、none
或scale-down
即可。
介绍一下object-position
object-position
是一种 CSS 样式属性,用于设置对象(如图片或视频)在容器中的位置。
通过设置object-position
属性,可以改变对象在容器中的位置,从而实现布局上的调整。
该属性的值可以是一个具体的像素值,也可以是相对于容器的百分比值。
例如:
设置{object-position: 50% 50%}
可以将对象在容器中居中显示。
该属性通常与object-fit
属性一起使用,用于控制对象在容器中的大小和位置。
举个小栗子
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>img{width: 300px;height: 300px;object-fit: cover;object-position: left top;transition: 1s;}img:hover{object-position: right bottom;}</style></head><body><img src="https://img.zcool.cn/community/015fe55e02d1dea8012165183c9fa1.jpg@1280w_1l_2o_100sh.jpg" alt=""><img src="https://img.zcool.cn/community/0115c759687127a8012193a3eaa999.png@1280w_1l_2o_100sh.png" alt=""><img src="https://bpic.588ku.com/back_our/20210808/bg/ca506bb9197dea874b41e5418610d949_76567.png" alt=""></body>
</html>
css——图片缩放,拉伸,变形的解决办法相关推荐
- [css] css图片缩放失真出现锯齿的如何解决呢?
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...
- 【Get深一度】Microsoft Office 2013 Word中图片插入后变模糊解决办法
Microsoft Office 2013 Word中图片插入后变模糊解决办法 作者在使用Word时发现插入的图片变模糊了,这个问题以前也经常遇到,只是从未上心过,这次花点心思解决一下,也给众多 ...
- cocos creator 设置开启canvas 透明后 半透明图片 不正常的 官方解决办法
cocos creator 设置开启canvas 透明后 半透明图片 不正常的 官方解决办法 必须用 one,one minus src alpha,否则 web 端的贴图渲染时会莫名其妙和 canv ...
- CSS图片的下边有间隙解决方法
CSS图片的下边有间隙解决方法 方法1:设置图片为块元素 img{display:block; } 方法2:给图片设置垂直对齐 图片行内块元素 他在对齐的时候默认的对齐方式与基线对齐 vertical ...
- css 设置图片缩放不变形
(1)设置image 属性 {max-width: 100%;max-height: 100%; } 可实现图片在指定父元素内等比例缩放,但不保证宽高同时充满父元素,如果想要达到图片充满父元素且保持清 ...
- css图片压缩不变形
大的banner图片.电脑上显示效果不错.但手机上浏览,要么变形,要不变成高度很低的窄图片, 解决办法有几个.可以通过js方式动态调整 比例,但是有时页面加载不完全,可能没法生效.不保险 通过css的 ...
- iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://www.tuicool.com/articles/IfEZre 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. ...
- IOS下图片不能显示问题的解决办法
最近遇到这样一个问题,在HTML5手机页面中,直接给<img>标签设置宽高,即便图片路径正常,在IOS真机下也是无法显示的,而在安卓以及浏览器的模拟真机上都是正常显示的,这是为什么呢? h ...
- iOS照相机获取到的图片自动旋转90度解决办法
情景再现: iOS开发过程中,要实现用用手机摄像头拍一张照片,经过裁剪压缩,然后发出去.结果发出去的图片始终是逆时针旋转了90度的图片. 事出有因: 相机拍照后直接取出来的UIimage(用UIIma ...
最新文章
- pandas使用query函数删除dataframe中两个数据列加和小于某一特定值的数据行(removing rows based on multiple dataframe column value
- Sql Server 2005 服务器性能监视[转]
- 随笔18 java中的类加载器
- hdu 4417 划分树
- 72.JVM参数设置(各种jvm参数)、分析;Total Heap;The Young Generation;
- css、js控制html标签的属性和内容
- python 十进制与二进制以及位运算
- android java函数_java – 在android中创建全局函数
- 前端实用小工具(URL参数截取、JSON判断、数据类型检测、版本号对比等)
- python在财务中的应用-财务人要学Python吗?
- windows下 Mysql 错误1067 Can't open and lock privilege tables: Table 'mysql.user' doesn't exist
- VUE的数据双向绑定
- php 检查货币类型_PHP如何获取货币汇率-百度经验
- 关于英语单词记忆的总结
- 5G商用牌照发放,区块链与5G能擦出多大“火”
- php的电阻率是多少,PTF65517KBT-10B14
- Python的mpl_finance模块从2020年已经提醒弃用,新mplfinance模块详解(一)
- PHP税前税后,请问下大家 怎么根据税后工资1万元推算出税前工资是多少
- 修改射手影音播放器字幕保存路径的两种方法
- java looper_java-无法在某些设备上尚未调用Looper.prepare...
热门文章
- DM8达梦数据库:系统中的错误码信息
- 1028 人口普查 (20分)
- 特殊句式结构--强调句与分隔结构
- linux终端cd未找到命令,Linux cd 命令 command not found cd 命令详解 cd 命令未找到 cd 命令安装 - CommandNotFound ⚡️ 坑否...
- 机器人参加高考还拿高分,究竟怎么做到的?
- 九成宫醴泉铭-欧阳询(慢更)
- 时差 频差 双星定位 matlab,双星时差频差无源定位系统定位算法工程指标分析
- 微软气坏了!Windows 惨遭抄袭,这款系统简直超越正品
- 滴水逆向学习笔记 -2-
- NJR日清纺微理光R5445系列 单节锂电池保护芯片,内置驱动器高位Nch FET开关温度保护