鏂规硶涓€锛屾敼鍙樺搴︿笂鍥炬柟寮忥細.g-outer{width:650px;楂樺害锛?40px锛涜儗鏅浘鍍忥細url锛坕mage1.png锛夛紱婧㈠嚭锛氶殣钘忥紱}.g-inner{楂樺害锛?40px锛涜儗鏅細缃戝潃锛坕mage2.png锛夛紱鍔ㄧ敾锛歸idthchange3s鏃犻檺浜ゆ浛绾挎€э紱}@keyframeswidthchange{0%{width:650px;}100%{瀹藉害锛?px锛泒}鏁堟灉濡備笅锛氬綋鐒讹紝浣跨敤mask閬僵涔熷緢瀹规槗瀹炵幇绫讳技鐨勬晥鏋?.g-outer{background-image:url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);}.g-inner{鑳屾櫙:url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);钂欑増锛氱嚎鎬ф笎鍙橈紙90deg锛?fff0%锛?fff50%锛岄€忔槑50%锛岄€忔槑100%锛夛紱閬僵灏哄锛?00%100%锛涘姩鐢伙細maskChange2s鏃犻檺浜ゆ浛绾挎€э紱}@keyframesmaskChange{0%{mask-position:-100%0;}100%{闈㈠叿-p浣嶇疆锛?0锛涗篃鍙互杈惧埌鍚屾牱鐨勬晥鏋滐細涓婇潰DEMO鐨勫畬鏁翠唬鐮侊細CodePenDemo--SwitchPicture寮哄ぇ鐨刴ask灞炴€т笉澶簡瑙ｏ紝鍙互鎴筹細绮惧僵鐨凜SSMASK浣跨敤resize瀹炵幇鎷栧姩鑰宒rop鍑芥暟鐨勪笅涓€姝ユ槸鏈€鏍稿績涔熸槸鏈€鍏抽敭鐨勪竴姝ャ€傚阀濡欏湴浣跨敤CSS鐨剅esize灞炴€у疄鐜版嫋鎷芥帶鍒跺厓绱犵殑瀹藉害銆備粈涔堟槸璋冩暣澶у皬锛焤esize锛氳繖涓睘鎬у彲浠ヨ浣犳帶鍒朵竴涓厓绱犵殑澶у皬璇硶濡備笅锛歿/*鍏抽敭瀛楀€?/resize:none;璋冩暣澶у皬锛氫袱鑰咃紱璋冩暣澶у皬锛氭按骞筹紱璋冩暣澶у皬锛氬瀭鐩达紱璋冩暣澶у皬锛氬潡锛涙紨绀猴細

Loremipsumdolorsitamet,consecteturadipisicingelit.Autquilaborererumplaceatsimiliquehicconsequaturtemporedoloribusliquidalias,nobisvoluptates銆侾erferendis,voluptateplaceatessesolutadelenitiid!锛屽彲浠ユ按骞虫嫋鍔ㄦ敼鍙樺搴︺€傛晥鏋滃涓嬶細绠€鍗曟€荤粨涓€浜泃ips锛歳esize闇€瑕侀厤鍚坥verflow:scroll鎵嶈兘鐢熸晥銆傚綋鐒跺噯纭殑璇存硶鏄痮verflow鏄笉鍙鐨勶紝鎴栬€呯洿鎺ヤ綔鐢ㄤ簬鏇挎崲鍏冪礌锛屾瘮濡俰mages锛?video>鍜?iframe>锛?textarea>绛夈€傛垜浠彲浠ヨ缃按骞虫嫋鎷斤紝鍨傜洿鎷栨嫿锛屽悓鏃舵按骞虫嫋鎷藉拰鍨傜洿鎷栧姩閫氳繃璋冩暣澶у皬鐨勬按骞炽€佸瀭鐩村拰涓よ€呫€傚彲浠ュ拰瀹瑰櫒鐨刴ax-width,min-width,max-height,min-height缁撳悎锛岄檺鍒舵嫋鍔ㄥ彲浠ユ敼鍙樼殑鑼冨洿銆侫pplyresizetoimagedraggingandswitchingOK.鎺ヤ笅鏉ワ紝鎴戜滑灏唕esize搴旂敤鍒板浘鐗囩殑鎷栧姩鍜屽垏鎹腑銆傞鍏堬紝杩樻槸涓婇潰鐨勪唬鐮侊紝鎴戜滑灏濊瘯瀵瑰瓙鍏冪礌搴旂敤resize锛?divclass="g-outer">