图片处理
(1) 图片自适应
1. 宽自适应
- <style type="text/CSS">
- .img_warp{
- width:50px;
- height:50px;
- overflow:hidden;
- text-align:center;
- img{
- max-height:100%;
- }
- }
- </style>
2. 高自适应
- <style type="text/css">
- .img_warp{
- width:50px;
- height:50px;
- overflow:hidden;
- img{
- max-width: 100%;
- vertical-align:middle;
- }
- }
- </style>
(2) 相对绝对完全居中法
代码如下:
- <style type="text/css">
- .imgoverflow{
- width: 50px;
- height: 50px;
- overflow: hidden;
- position: relative;
- }
- .imgoverflow img{
- position: absolute;
- left: -999px;
- right: -999px;
- top: -999px;
- bottom: -999px;
- margin:auto;
- }
- </style>
- <p class="imgoverflow">
- <img src="img/CSShutu/circle.png"/>
- </p>
来源: https://www.2cto.com/kf/201804/740850.html