css实现图片虚化_CSS中实现图片自适应的方法

在我们布局中难免会遇到，图片或icon因为大小不一样，但在我们写样式时高宽都固定，而导致图片拉升影响美观. 你可以选择让UI重新切图或者自己切，但是你要知道的是，如何让图片在固定的范围内自适应大小。

首先来看看demo吧:

<div class="img-wrapper"><img src="./ruby.png" /></div><div class="img-wrapper"><img src="./hert.png" /></div><div class="img-wrapper"><img src="./clock.png" /></div>
.img-wrapper {width: 57px;height: 57px;margin: 20px;
}.img-wrapper img {width: 100%;height: 100%;
}

我们一般都会这样去设置一个icon。但是我这里的icon都不一样大，所以显示是这样的：

可以明显看到，心心已经明显变形了，变得非常宽，肚子变大了，而闹钟变窄了，那下面就来让他们变得正常：

.img-wrapper {position: relative;width: 57px;height: 57px;margin: 20px;
}.img-wrapper img {position: absolute;left: 0;right: 0;top: 0;bottom: 0;height: 100%;margin: auto;
}

我们只需要给让图片定位，给margin:auto就能达到了，看看效果

css实现图片虚化_CSS中实现图片自适应的方法相关推荐

Android 加载本地图片(文件管理器中的图片墙)
Android 加载本地图片(文件管理器中的图片墙) --关于图片墙的一些感悟与疑问,希望大家共同探讨. (By伊叶也) 图片显示及监听 1.图片显示:基本上就5种显示形式(如果同时嵌入5种形式,采用 ...
ctf图片隐写中改变图片高和宽
ctf图片隐写中改变图片高和宽利用工具 Hex Editor Neo将图片进行十六进制分解, 然后我们可以找出该图片的像素高宽,转化成十六进制然后对应找到该像素点所在位置,进行修改即可.
python图片保存_Python中读取,显示,保存图片的方法
一 opencv importcv2 as cv#load img =cv.imread(imagepath)#shape=(height, width, channel) h,w,c =img.sh ...
ios 按钮图片拉伸_iOS中实现图片自适应拉伸效果的方法
前言在Android中实现图片的拉伸特别特别简单,甚至不用写一行代码,直接使用.9图片进行划线即可.但是iOS就没这么简单了,比如对于下面的一张图片(原始尺寸:200*103): 我们不做任何处理, ...
picturebox显示服务器图片大小,WinForm中实现picturebox自适应图片大小的方法
本文实例讲述了winform中实现picturebox自适应图片大小的方法.分享给大家供大家参考,具体如下: picturebox控件共有两种载入图片方式,分别为: picturebox1.backg ...
php 图片模糊,Word中插入图片模糊、不清晰的解决方法
在Word中插入小图片时,往往图片不是以原始大小显示的,而是被放大一些,造成图片模糊不清. 其实这是由于插入图片的分辨率造成的,在计算机上处理的图片分辨率一般有三种:72dpi.96dpi.300dp ...
html5穿插动图,视频中间插播广告在视频中的任意位置添加广告图片，视频中穿插图片的方法...
小编最近在看一个电视剧,这个电视剧只能用优酷的播放器进行播放,但优酷播放器真是让我很奔溃,看一集视频起码要插播三次广告,简直全程无感.幸好之前解决了优酷视频转换格式的问题,不然我真是要放弃优酷播放器了 ...
html邮件修改不了图片,邮件模板中的图片不显示,该怎么解决
邮件模板中的图片不显示这个是我邮件模板 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
Excel表格怎么批量导出图片将文件中的图片导出到文件夹中
这几天一直没写博文,但是为了让大山的孩子,能够像京城的富二代一样,可以开开心心公公平平地享受学习excel的权利,因此决定今天继续写,今天主要来谈谈excel图片批量导出,关于excel表格怎么批量导 ...

css实现图片虚化_CSS中实现图片自适应的方法

css实现图片虚化_CSS中实现图片自适应的方法相关推荐

最新文章

热门文章