saturn-ui
Version:
🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍
1 lines • 20.5 kB
CSS
*,.handle{-webkit-box-sizing:border-box}.clear-ft:after,.clear-mg{content:''}.clear-scroll,.m-mask>div,.m-mask>ul{overflow-y:auto;overflow-x:hidden}.inline-block,img{vertical-align:middle}.ice-header-2>div,.ice-header>div,.ice-menu>div{cursor:pointer;text-align:center}@font-face{font-family:'液晶字体';src:url(fonts/digifaw.ttf);font-weight:400;font-style:normal}@font-face{font-family:'追光体';src:url(fonts/douyuFont.otf);font-weight:400;font-style:normal}.flip-vertical-left{-webkit-animation:flip-vertical-left .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-vertical-left .4s cubic-bezier(.455,.03,.515,.955) both}@-webkit-keyframes flip-vertical-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}@keyframes flip-vertical-left{0%{-webkit-transform:rotateY(0);transform:rotateY(0)}100%{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}}.flip-horizontal-top{-webkit-animation:flip-horizontal-top .4s cubic-bezier(.455,.03,.515,.955) both;animation:flip-horizontal-top .4s cubic-bezier(.455,.03,.515,.955) both}@-webkit-keyframes flip-horizontal-top{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}}@keyframes flip-horizontal-top{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;min-height:100%;background:#fff;font-family:'Microsoft YaHei',Arial,Helvetica,sans-serif}a,a:hover{display:block;text-decoration:none}dl,li,ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}button,input,select{border:none;background:#fff}img{max-width:100%;height:auto}.clear-ft:after{display:block;clear:both}.clear-mg{display:table}.clear-scroll::-webkit-scrollbar{width:6px}.clear-scroll::-webkit-scrollbar-thumb{border-radius:10px;background:#dadee0}.wrap-en{word-wrap:break-word}.inline-block{display:inline-block}.g-lf{float:left}.g-rt{float:right}.m-mask{position:fixed;top:0;left:0;z-index:99;width:100vw;height:100vh;min-width:100%;background:rgba(0,0,0,0);-webkit-transition:.4s all;transition:.4s all;opacity:0}.m-mask.show{opacity:1;background:rgba(0,0,0,.7)}.m-mask>div,.m-mask>ul{position:absolute;padding:15px;background:#fff;-webkit-transition:.4s all;transition:.4s all;color:#494949;font-size:14px}.g-wrap{width:90%;margin:0 auto}.fade-enter,.fade-leave-to{opacity:0}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .4s;transition:opacity .4s}.translate-enter,.translate-leave-to{-webkit-transform:translateY(100%);transform:translateY(100%);opacity:0}.translate-enter-active,.translate-leave-active{-webkit-transition:all .4s;transition:all .4s}.slider-enter-to{-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;-webkit-transform:translateX(0);transform:translateX(0)}.slider-leave-active{-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.slider-enter{-webkit-transform:translateX(100%);transform:translateX(100%)}.slider-leave{-webkit-transform:translateX(0);transform:translateX(0)}.slide-enter-active,.slide-leave-active{-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s}.slide-enter{-webkit-transform:translateY(100%);transform:translateY(100%)}.slide-leave-to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}@-webkit-keyframes cursor{0%,100%{opacity:0}25%,75%{opacity:.5}50%{opacity:1}}@keyframes cursor{0%,100%{opacity:0}25%,75%{opacity:.5}50%{opacity:1}}.animation-cursor{-webkit-animation:cursor 1.2s infinite;animation:cursor 1.2s infinite}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}75%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}25%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}75%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.animation-rotate{-webkit-animation:rotate .8s linear infinite;animation:rotate .8s linear infinite}.ant-dropdown-menu{background-color:rgba(43,44,47,.8)}.ant-dropdown-menu .ant-dropdown-menu-item,.ant-dropdown-menu .ant-dropdown-menu-submenu-title{color:#fff}.ant-dropdown-menu .ant-dropdown-menu-item:hover,.ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover{background-color:rgba(255,255,255,.2)}.ice-header{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100vw;background:rgba(0,0,0,0);font-size:2rem;top:0;font-weight:400;color:wheat;font-family:'追光体'}.ice-header>div{width:60%;background:url(images/IceHeader/bg.png) no-repeat;background-size:100% 100%;line-height:4rem}.ice-header-2,.ice-header-3{top:0;width:100vw;display:-webkit-box;display:-ms-flexbox;color:#fff;position:absolute}.ice-header-2{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:url(images/IceHeader2/bg.png) no-repeat;background-size:100% 100%;font-size:30px;font-weight:700}.ice-header-2>div{width:60%;line-height:5rem}.ice-header-3{height:60px;background-color:#1c2531;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 10px}.ice-header-3 .logo{width:40px;margin:0 10px}.ice-header-3 .left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ice-header-3 .left .title{margin-right:50px;font-size:24px}.ice-header-3 .right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ice-menu,.ice-menu-2{display:-webkit-box;display:-ms-flexbox}.ice-menu{width:50rem;height:5rem;position:absolute;bottom:0;left:calc(50% - 25rem);background-image:url(images/IceMenu/bg.svg);background-size:100%;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ice-menu .iconify{font-size:20px}.ice-menu>div{width:5rem;height:5rem;padding-bottom:.88rem;color:#fff;position:relative}.ice-menu>div:hover{color:#00fff1}.ice-menu-2{display:flex}.ice-menu-2 .ice-menu-item,.ice-menu-2 .ice-sub-item{height:60px;line-height:60px;border-bottom:2px solid transparent}.ice-menu-2 .ice-menu-item .ice-icon,.ice-menu-2 .ice-sub-item .ice-icon{font-size:1.4em}.ice-menu-2 .ice-menu-item:hover,.ice-menu-2 .ice-sub-item:hover{border-color:#fff;background:rgba(255,255,255,.1)}.ice-menu-2 .ice-menu-item{padding:0 10px;cursor:default}.ice-menu-2 .ice-sub-item .ice-sub{position:absolute;background-color:#1c222b;z-index:1;padding:1em}.ice-menu-2 .ice-sub-item .ice-sub .ice-menu-item{cursor:pointer;height:31px;line-height:31px;font-size:14.4px;padding:0 .4em}.ice-menu-2 .ice-sub-item .ice-sub .ice-menu-item:hover{border-color:transparent;cursor:pointer}.ice-menu-2 .ice-sub-item .ice-sub .ice-menu-item-active{border-color:transparent}.ice-menu-2 .ice-sub-item .ice-sub .ice-menu-item-group{margin-right:10px}.ice-menu-2 .ice-sub-item .ice-sub .ice-menu-item-group .item-group-title{height:29px;line-height:29px;border-bottom:1px dotted #fff}.ice-dialog{position:absolute;padding:0 5px 10px;border-radius:4px;border:1px solid;background:-webkit-gradient(linear,right top,left top,from(#4db3ff),to(#4db3ff)) left top no-repeat,-webkit-gradient(linear,left top,left bottom,from(#4db3ff),to(#4db3ff)) left top no-repeat,-webkit-gradient(linear,right top,left top,from(#4db3ff),to(#4db3ff)) right top no-repeat,-webkit-gradient(linear,left top,left bottom,from(#4db3ff),to(#4db3ff)) right top no-repeat,-webkit-gradient(linear,right top,left top,from(#4db3ff),to(#4db3ff)) left bottom no-repeat,-webkit-gradient(linear,left top,left bottom,from(#4db3ff),to(#4db3ff)) left bottom no-repeat,-webkit-gradient(linear,right top,left top,from(#4db3ff),to(#4db3ff)) right bottom no-repeat,-webkit-gradient(linear,right top,left top,from(#4db3ff),to(#4db3ff)) right bottom no-repeat;background:linear-gradient(to left,#4db3ff,#4db3ff) left top no-repeat,linear-gradient(to bottom,#4db3ff,#4db3ff) left top no-repeat,linear-gradient(to left,#4db3ff,#4db3ff) right top no-repeat,linear-gradient(to bottom,#4db3ff,#4db3ff) right top no-repeat,linear-gradient(to left,#4db3ff,#4db3ff) left bottom no-repeat,linear-gradient(to bottom,#4db3ff,#4db3ff) left bottom no-repeat,linear-gradient(to left,#4db3ff,#4db3ff) right bottom no-repeat,linear-gradient(to left,#4db3ff,#4db3ff) right bottom no-repeat;background-size:1px 20px,20px 1px,1px 20px,20px 1px;background-color:rgba(20,20,20,.5);color:#fff}.ice-dialog .ice-dialog__header{height:40px;line-height:40px;cursor:move;overflow:hidden;border-bottom:1px solid #3b4d5e}.ice-dialog .ice-dialog__header :deep(.i-icon){vertical-align:sub;margin-right:5px}.ice-dialog .ice-dialog__header .title{font-size:16px}.ice-dialog .ice-dialog__header .close-btn{float:right;cursor:pointer;font-size:16px;margin-right:5px;margin-top:-2px}.ice-dialog .ice-dialog__header .close-btn:hover{color:#89bceb}.ice-dialog .ice-dialog__body{width:100%;height:calc(100% - 40px);overflow-x:hidden;overflow-y:auto}.ice-dialog .content{overflow:hidden;height:100%}.ice-dialog .footer{height:40px}.ice-dialog .footer .footer-content{height:40px;width:100%;padding-left:10px;padding-right:10px;position:absolute;left:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#404146}@-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes popup{from{opacity:0;-webkit-transform:scale(.1);transform:scale(.1)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes popup{from{opacity:0;-webkit-transform:scale(.1);transform:scale(.1)}to{opacity:1;-webkit-transform:none;transform:none}}.fadein-right{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeInRight;animation-name:fadeInRight}.fadein-left{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.fadein-popup{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:popup;animation-name:popup}.active{-ms-touch-action:none;touch-action:none;z-index:999}.btn,.handle,.ice-carousel{position:absolute;z-index:1}.handle{box-sizing:border-box;width:10px;height:10px;opacity:0}.handle-x{height:auto;top:10px;right:0;bottom:10px;cursor:e-resize}.handle-y{width:auto;bottom:0;left:10px;right:10px;cursor:s-resize}.handle-xy{bottom:0;right:0;cursor:se-resize}@media only screen and (max-width:768px){[class*=handle-]:before{content:'';left:-10px;right:-10px;bottom:-10px;top:-10px;position:absolute}}.ice-carousel{color:#f0f8ff;width:400px;left:40%;top:200px;background-color:#ff3131;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.ice-carousel .icon{margin:auto 8px}.ice-carousel .box{width:350px;overflow:hidden}.ice-carousel .close{position:absolute;right:0;top:0;margin:2px 3px}.ice-carousel .close .text1{margin:auto 0;white-space:nowrap;text-overflow:ellipsis}.btn{left:30%;top:200px}.ice-icon svg:not(:root){vertical-align:text-bottom;margin-right:1px;padding-bottom:1px}.ice-clock .time{margin:0 2px;font-family:'液晶字体'}.ice-clock .week{margin:0 2px}.ice-list table tbody,.ice-list table thead{display:block;overflow-x:auto}.ice-list table tbody{border-radius:0 0 10px 10px;background-color:rgba(33,44,76,.8)}.ice-list table thead,.ice-list tbody tr{display:table;width:100%;table-layout:fixed;text-align:center}.ice-list tbody tr{margin-bottom:10px;border-radius:10px}.ice-list table thead{background-color:rgba(54,103,151,.8)}.ice-list table thead:last-child{width:calc(100% - 17px)}.ice-list tbody td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ice-list tbody>tr:hover{background-color:rgba(255,255,255,.3)}.ice-panel-1 .title{line-height:30px;padding-left:10px;background:-webkit-gradient(linear,right top,left top,from(rgba(18,21,60,0)),color-stop(39%,rgba(18,21,60,.6)),to(rgba(7,9,40,.8)));background:linear-gradient(270deg,rgba(18,21,60,0) 0,rgba(18,21,60,.6) 39%,rgba(7,9,40,.8) 100%)}.ice-panel-1 .content{height:calc(100% - 30px)}.ice-panel-2 .title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px 15px 5px 5px;font-size:14px;color:#fff;font-weight:550;background-image:-webkit-gradient(linear,left top,right top,from(rgba(14,114,153,.7)),to(rgba(0,0,0,0)));background-image:linear-gradient(to right,rgba(14,114,153,.7),rgba(0,0,0,0))}.ice-panel-2 .content{padding:10px}.ice-scrollbar{overflow-x:auto}.ice-scrollbar>div{width:100%}.ice-scrollbar::-webkit-scrollbar{width:10px;height:8px}.ice-scrollbar::-webkit-scrollbar-thumb{background-color:#5291f0;border:3px solid transparent;border-radius:9px;background-clip:content-box;cursor:pointer}.ice-scrollbar::-webkit-scrollbar-thumb:hover{border:10px solid #5291f0}.ice-virtual-list{position:relative;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.ice-virtual-list .u-scroll-bar{width:100%}.ice-virtual-list .m-list-scroll{position:absolute;top:0;left:0;width:100%}.ice-wrapper-1 .wrap{position:fixed;top:0;width:500px;height:100vh;color:#fff}.ice-wrapper-1 .wrap .icon{position:absolute;top:100px;cursor:pointer}.ice-wrapper-1 .wrap-left{background:-webkit-gradient(linear,right top,left top,from(rgba(18,21,60,0)),color-stop(39%,rgba(18,21,60,.6)),to(rgba(7,9,40,.8)));background:linear-gradient(270deg,rgba(18,21,60,0) 0,rgba(18,21,60,.6) 39%,rgba(7,9,40,.8) 100%);left:0;padding:9.07rem 9.38rem 0 3.06rem}.ice-wrapper-1 .wrap-left .icon{right:-30px}.ice-wrapper-1 .wrap-right{background:-webkit-gradient(linear,left top,right top,from(rgba(18,21,60,0)),color-stop(39%,rgba(18,21,60,.6)),to(rgba(7,9,40,.8)));background:linear-gradient(90deg,rgba(18,21,60,0) 0,rgba(18,21,60,.6) 39%,rgba(7,9,40,.8) 100%);right:0;padding:9.07rem 3.81rem 0 8.63rem}.ice-wrapper-1 .wrap-right .icon{left:-30px}.ice-wrapper-1 .showleft{-webkit-animation:showleft 1s forwards;animation:showleft 1s forwards}@-webkit-keyframes showleft{from{left:-500px}to{left:0}}@keyframes showleft{from{left:-500px}to{left:0}}.ice-wrapper-1 .hideleft{-webkit-animation:hideleft 1s forwards;animation:hideleft 1s forwards}@-webkit-keyframes hideleft{from{left:0}to{left:-500px}}@keyframes hideleft{from{left:0}to{left:-500px}}.ice-wrapper-1 .showright{-webkit-animation:showright 1s forwards;animation:showright 1s forwards}@-webkit-keyframes showright{from{right:-500px}to{right:0}}@keyframes showright{from{right:-500px}to{right:0}}.ice-wrapper-1 .hideright{-webkit-animation:hideright 1s forwards;animation:hideright 1s forwards}@-webkit-keyframes hideright{from{right:0}to{right:-500px}}@keyframes hideright{from{right:0}to{right:-500px}}.ice-wrapper-2 .wrap-down .icon,.ice-wrapper-2 .wrap-left .icon,.ice-wrapper-2 .wrap-right .icon{right:0}.ice-wrapper-2 .wrap{position:fixed;bottom:30px;color:#fff;width:320px;background-color:rgba(20,20,20,.5);border-radius:10px;border:2px solid #258093}.ice-wrapper-2 .wrap .icon{position:absolute;top:0;cursor:pointer;padding:5px}.ice-wrapper-2 .wrap-left,.ice-wrapper-2 .wrap-right{top:80px}.ice-wrapper-2 .wrap-down{width:calc(100% - 680px);height:320px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ice-wrapper-2 .showleft{-webkit-animation:showleft 1s forwards;animation:showleft 1s forwards}@keyframes showleft{from{left:-320px}to{left:10px}}.ice-wrapper-2 .hideleft{-webkit-animation:hideleft 1s forwards;animation:hideleft 1s forwards}@keyframes hideleft{from{left:10px}to{left:-320px}}.ice-wrapper-2 .showright{-webkit-animation:showright 1s forwards;animation:showright 1s forwards}@keyframes showright{from{right:-320px}to{right:10px}}.ice-wrapper-2 .hideright{-webkit-animation:hideright 1s forwards;animation:hideright 1s forwards}@keyframes hideright{from{right:10px}to{right:-320px}}.ice-wrapper-2 .showdown{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:showdown 1s forwards;animation:showdown 1s forwards}@-webkit-keyframes showdown{from{bottom:-320px}to{bottom:30px}}@keyframes showdown{from{bottom:-320px}to{bottom:30px}}.ice-wrapper-2 .hidedown{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:hidedown 1s forwards;animation:hidedown 1s forwards}@-webkit-keyframes hidedown{from{bottom:30px}to{bottom:-320px}}@keyframes hidedown{from{bottom:30px}to{bottom:-320px}}.ice-number-flop{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-items:center}.ice-number-flop .anim-object{width:55px;height:70px;line-height:70px;margin:0 10px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background-image:url(images/border/border1.svg);background-repeat:no-repeat;background-size:100% 100%;-moz-background-size:100% 100%}.ice-number-flop .anim-object .active{display:block}.ice-number-flop .anim-object .front{-webkit-transform:rotateY(0);transform:rotateY(0)}.ice-number-flop .anim-object .back{transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}.ice-number-flop .anim-object .text{color:#fff;font-family:'液晶字体';font-size:3em;text-align:center;display:inline}.ice-number-flop .anim-object .face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;text-align:center}.ice-weather{color:#fff;font-size:18px;margin-right:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ice-weather .weather-icon{display:inline-block;margin-right:5px;width:42px;height:30px;background-color:transparent}.ice-weather .weather-1{background-image:url(./images/IceWeather/d00.gif)}.ice-weather .weather-2{background-image:url(./images/IceWeather/d01.gif)}.ice-weather .weather-3{background-image:url(./images/IceWeather/d02.gif)}.ice-weather .weather-4{background-image:url(./images/IceWeather/d07.gif)}.ice-weather .weather-5{background-image:url(./images/IceWeather/d08.gif)}.ice-weather .weather-6{background-image:url(./images/IceWeather/d09.gif)}.ice-weather .weather-7{background-image:url(./images/IceWeather/d10.gif)}.ice-weather .weather-8{background-image:url(./images/IceWeather/d14.gif)}.ice-weather .weather-9{background-image:url(./images/IceWeather/d15.gif)}.ice-weather .weather-10{background-image:url(./images/IceWeather/d16.gif)}.ice-weather .weather-11{background-image:url(./images/IceWeather/d17.gif)}.ice-weather .weather-12{background-image:url(./images/IceWeather/d18.gif)}.ice-weather .weather-13{background-image:url(./images/IceWeather/d53.gif)}.ice-image>img{width:100%;height:100%}