图片自适应(定宽,定高)

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图片固定高度横向显示中间</title> <style type="text/css"> body{padding: 30px} .r-pic{width: 245px;height: 185px;position: relative;border:1px solid #333;float: left;margin: 20px} .imgcover{position: relative;overflow: hidden;width: 100%;height: 100%;} .imgcover img {position: absolute; top: -100%;right: -100%;bottom: -100%;left: -100%;margin: auto;width: auto;height: auto;transition:all .5s;} .imgcover img:hover{transform:scale(1.2);} .imgcover.fixed-height img{height: 100%;} .imgcover.fixed-width img{width: 100%} .imgcover.imgcover-full img{min-width: 100%;min-height: 100%} </style> </head> <body> <div class="r-pic"> <div class="imgcover fixed-height"> <img src="http://img.gzui.net/wp-content/uploads/2015/05/91ef76c6a7efce1b27732cc6ad51f3deb48f6566.jpg" alt=""> </div> <p>高度固定,横向显示中间</p> </div> <div class="r-pic"> <div class="imgcover fixed-height imgcover-full"> <img src="http://mote.xcabc.com/img/banner01.jpg" alt=""> </div> <p>高度固定,横向显示中间(横向必须填满容器)</p> </div> </div> <div class="r-pic"> <div class="imgcover fixed-width"> <img src="http://cz.xcabc.com/Img/201701/17/20170117043809421.jpg" alt=""> </div> <p>宽度固定,纵向显示中间</p> </div> <div class="r-pic"> <div class="imgcover fixed-width imgcover-full"> <img src="http://mote.xcabc.com/img/banner01.jpg" alt=""> </div> <p>宽度固定,纵向显示中间(纵向必须填满容器)</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 图片自适应(定宽,定高)