一次解决你的图像尺寸和定位问题。
作者:Taylor Coon 译者:前端小智 来源:medium
假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端。 但2个月后,他在手机上打开网站,看到他的帅气图像被压成一个小盒子,或者图像被不成比例地压扁,他略微生气跟你(前端)说,给你半天的时间,立马解决。如果解决不了,那在给你半天的时间。
对于刚入门的不久的前端小伙伴可能给他一个礼拜也解决不了,因为要兼容所有的端,这时候他要怎么办呢?这里有一种方案,可以解决所有屏幕大小、所有卡片大小或任何其他用例上的问题,我们来看看这个万能的方法。
默认行为
将图像导入到我们的组件中,然后将其放在页面上,下面是正常默认的情况:
在不同的视口上,图片随着屏幕的变化而变化。在不同的消费设备上有超过10,000种不同的屏幕尺寸。有小到360px
宽的手机。有5k台imac,也有 4k电视,这么多尺寸,我们要怎么去适配图片呢?
把外围容器的大小写死怎么样?
我们可以将图片的包裹元素的大小写死,如:
.img-container {
width: 700px;
height: 450px;
}
.image{
width: 100%;
height: 100%
}
这会比刚开始的好的多了,图像不再随视口的大小进行缩放,视口变大的时候,图片也只显示外围容器设置的大小。 但是,如果视口太小,则会切除图像的底部。
另外,如果用户使用的是大屏幕,则该图像不会自动按比例放大或缩小,因此生成的设计中的图像可能太大或太小。
CSS有一些内置的特性来帮助我们
我们来试试另一种方法。不需要将图像导入到组件中,直接在CSS文件中引用它:
background-image
默认情况下不会将图像缩小以适应div
大小,因此我们只能看到图像的左上角。
CSS 更多的内置特性
在CSS中, 还有一些 background-image
相关的选项:
background-position: center
告诉浏览器将图像居中放置在div
上。
background-size: cover
这告诉浏览器自动将图像缩小以适合div
的大小。
假设图片是从后台过来的,那又要怎么做?
如果图片是从远程请求过来的,那我们可以使用内联样式:
这样也能完美用 css 的方法来解决图片定位,大小的问题。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python多任务-进程
- Python-异常处理
- Python多任务-协程
- Scrapyd发布爬虫的工具
- MySQL8.0.18 试用Hash Join
- InnoDB:表空间管理
- MyBatis 增删改查
- python分析wav文件
- CICD实战——服务自动构建与部署
- python+opencv实时视频目标检测
- python数据化运营分析实例---销售预测
- Leetcode 1444. 切披萨的方案数(DP,类似石材切割,二维前缀和)
- Python生成内涵图片
- Linux 下makefile实战 ——编写真实的C项目
- MySQL8功能详解——Common table expression (CTE)