css圖片不拉伸顯示多餘的裁剪
阿新 • • 發佈：2018-12-22
實際圖片大小
顯示部分圖片
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <style type="text/css"> .mui-content{ text-align: center; } .img-content{ background-image: url(images/QQ圖片20181203100842.jpg); display: inline-block; background-repeat: no-repeat; /*背景影象不平鋪*/ background-position:center;/*圖片居中顯示*/ background-size: cover; /*隱藏不需要顯示的圖片*/ height: 180px; width: 180px; } </style> </head> <div class="mui-content"> <div class="img-content"> </div> <body> <script src="js/mui.min.js"></script> <script type="text/javascript"> mui.init() </script> </body> </html>