一次解决你的图像尺寸和定位问题

开发 前端
假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端。

 [[342293]]

假如有一天,你老板给你一些帅气照片,他希望发布在公司自己网站上面,且希望能兼容其它端。 但2个月后,他在手机上打开网站,看到他的帅气图像被压成一个小盒子,或者图像被不成比例地压扁,他略微生气跟你(前端)说,给你半天的时间,立马解决。如果解决不了,那在给你半天的时间。

对于刚入门的不久的前端小伙伴可能给他一个礼拜也解决不了,因为要兼容所有的端,这时候他要怎么办呢?这里有一种方案,可以解决所有屏幕大小、所有卡片大小或任何其他用例上的问题,我们来看看这个万能的方法。

默认行为

 

将图像导入到我们的组件中,然后将其放在页面上,下面是正常默认的情况:

 

在不同的视口上,图片随着屏幕的变化而变化。在不同的消费设备上有超过10,000种不同的屏幕尺寸。有小到360px宽的手机。有5k台imac,也有 4k电视,这么多尺寸,我们要怎么去适配图片呢?

把外围容器的大小写死怎么样?

我们可以将图片的包裹元素的大小写死,如:

  1. .img-container { 
  2.   width: 700px; 
  3.   height: 450px; 
  4.  
  5. .image{ 
  6.   width: 100%; 
  7.   height: 100% 

 

 


 

 

这会比刚开始的好的多了,图像不再随视口的大小进行缩放,视口变大的时候,图片也只显示外围容器设置的大小。 但是,如果视口太小,则会切除图像的底部。

另外,如果用户使用的是大屏幕,则该图像不会自动按比例放大或缩小,因此生成的设计中的图像可能太大或太小。

CSS有一些内置的特性来帮助我们

我们来试试另一种方法。不需要将图像导入到组件中,直接在CSS文件中引用它:

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2016-11-16 09:25:15

WindowsWindow 8Windows 10

2019-09-23 10:26:20

开源技术 工具

2021-02-11 14:06:38

Linux内核内存

2022-08-29 18:14:55

MQ数据不丢失

2024-03-18 09:10:00

死锁日志binlog

2021-12-12 18:12:13

Hbase线上问题

2021-08-19 09:50:53

Java内存泄漏

2022-01-10 10:26:30

Kubernetes抓包环境

2011-05-06 10:32:06

硬盘键盘

2021-05-13 08:51:20

GC问题排查

2011-06-28 10:41:50

DBA

2022-03-16 14:59:28

打包debian模板文件

2023-04-06 07:53:56

Redis连接问题K8s

2020-09-28 14:41:24

Event Loop

2021-12-20 10:39:30

TopK排序代码

2022-11-03 16:10:29

groovyfullGC

2021-03-05 22:41:55

CDH集群CDH集群

2022-09-14 15:40:03

接口解决

2022-02-08 17:17:27

内存泄漏排查

2018-01-04 13:53:43

技术命令windows
点赞
收藏

51CTO技术栈公众号