鏈枃鏄郴鍒楁枃绔犵殑绗笁绡囥€傜郴鍒楁枃绔狅細鐜颁唬鍥剧墖鎬ц兘浼樺寲鍜屼綋楠屼紭鍖栨寚鍗?鍥剧墖绫诲瀷鍜屽浘鐗囨爣绛剧殑浣跨敤鐜颁唬鍥剧墖鎬ц兘浼樺寲鍜屼綋楠屼紭鍖栨寚鍗?鍝嶅簲寮忓浘鐗囪В鍐虫柟妗堝浘鐗囪祫婧愬湪鎴戜滑鐨勪笟鍔′腑鍗犳嵁浜嗛潪甯稿ぇ鐨勪竴閮ㄥ垎銆傜壒鍒槸瀹冨甯﹀鐨勬秷鑰楅潪甯稿法澶с€傚浘鐗囩殑鎬ц兘浼樺寲鍜屼綋楠屼紭鍖栧湪浠婂ぉ灏や负閲嶈銆傛湰鏂囧皢浠庡涓柟闈㈡潵闃愯堪鍦ㄥ綋浠婂悇绉嶆柊鐗规€х殑涓栫晫涓紝鎴戜滑濡備綍灏藉彲鑳藉湴浼樺寲鎴戜滑鐨勫浘鐗囪祫婧愮殑鎬ц兘鍜屼綋楠屻€傚浘鐗囩殑瀹介珮姣斻€佽鍓缉鏀惧氨OK浜嗭紝涓嬮潰杩涘叆鎴戜滑鐨勭涓変釜妯″潡锛屽浘鐗囩殑瀹介珮姣斻€佽鍓缉鏀俱€傛垜浠皢浠嬬粛4涓柊鐗规€э細aspect-ratioobject-fitobject-positionimage-rendering浣跨敤aspect-ratio鏉ラ伩鍏嶅竷灞€鍋忕Щ寰堝鏃跺€欙紝鍙兘浣跨敤鍥哄畾澶у皬鐨勫浘鍍忋€傛垜浠殑甯冨眬鍙兘鏄繖鏍风殑锛氬搴旂殑甯冨眬锛?ulclass="g-container">
鍥剧墖璇存槑
ulliimg{width:150px;}褰撶劧锛屽鏋滃悗鍙扮晫闈㈠嚭鐜板昂瀵镐笉姝ｅ父鐨勫浘鐗囷紝涓婇潰鏈繚鎶ょ殑甯冨眬灏变細鍑洪棶棰橈細鎵€浠ュ浜庡浘鐗囷紝鎴戜滑鎬绘槸寤鸿鍐欒繖涓や釜height鍜寃idth閬垮厤灏哄涓嶅瀵艰嚧鐨勫竷灞€闂锛歶lliimg{width:150px;height:100px;}鍚屾椂锛屽悓鏃跺啓鍏?img>鏍囩鐨勯珮鍜屽锛屽彲浠ュ湪鍥剧墖鍔犺浇鍓嶆彁鍓嶅崰鎹綅缃紝闃叉鍥剧墖涓€鐩村姞杞戒笉鍑烘潵閲嶆帓浠庣姸鎬佸埌娓叉煋瀹屾垚鐘舵€佺殑楂樺鍙樺寲寮曡捣鐨勯棶棰樸€傚綋鐒讹紝鍒颁粖澶╀负姝紝鎴戜滑涔熷彲浠ヤ娇鐢╝spect-ratio鏉ヨ缃浘鐗囩殑绾垫í姣斻€俛spect-ratioCSS灞炴€ф寚瀹氬鍣ㄧ殑棰勬湡绾垫í姣旓紝鍙敤浜庤绠楄嚜鍔ㄨ皟鏁村ぇ灏忓苟鎻愪緵鍏朵粬甯冨眬鍔熻兘銆傚拰涓婇潰鐨勪唬鐮佷竴鏍凤紝鎴戜滑鍙互鎹㈡垚锛歶lliimg{width:150px;aspect-ratio:3/2;}褰撶劧鏈夋椂鍊欙紝鎴戜滑鐨勫竷灞€鏄搷搴斿紡鐨勩€佸姩鎬佺殑锛屽鍣ㄧ殑瀹藉害涔熸槸涓嶇‘瀹氱殑锛屾墍浠ユ湁浜哸spect-ratio锛屾垜浠殑鍐欐硶灏卞彲浠ユ洿鑸掓湇浜嗐€倁lliimg{瀹藉害锛?00%锛沘spect-ratio:3/2;}杩欓噷瀹瑰櫒鍩轰簬Flex寮规€у竷灞€鎴栬€呭搷搴斿紡甯冨眬锛屽畠鐨勫搴︿笉鍥哄畾锛屼絾鏄浘鐗囩殑瀹介珮姣旀槸鍥哄畾鐨勶紝浣跨敤aspect-ratio:3/2鍙互寰堝緢濂界殑閫傚簲浜嗚繖绉嶆儏鍐点€傛垜浠埄鐢–SS涓緝鏂扮殑灞炴€spect-ratio濮嬬粓鑷姩鑾峰緱姝ｇ‘鐨勭旱妯瘮锛岃€屼笉绠″叾鐖跺厓绱犵殑瀹藉害濡備綍鍙樺寲銆傚綋鐒讹紝aspect-ratio涓嶈兘鍙敤鍦ㄨ繖閲屻€傚湪aspect-ratio鍑虹幇涔嬪墠锛屾垜浠彧鑳介€氳繃涓€浜涘叾浠栫殑Hack鏂规硶鏉ユā鎷熶竴涓浐瀹氱殑瀹介珮姣旓紝姣斿璁剧疆padding-top銆傚湪aspect-ratio涔嬪悗锛屾垜浠粓浜庡彲浠ヤ负瀹瑰櫒璁剧疆鍥哄畾鐨勭旱妯瘮銆俹bject-fit閬垮厤鍥惧儚鎷変几銆傚綋鐒讹紝闄愬埗楂樺害鍜屽搴︿篃鏈夐棶棰樸€?濡備綍閫傚簲鍏剁埗瀹瑰櫒鐨勯珮搴﹀拰瀹藉害銆倁lliimg{瀹藉害锛?50px锛涘楂樻瘮锛?/2锛沷bject-fit:cover;}浣跨敤object-fit:cover浣垮浘鍍忕殑鍐呭濉厖鍏冪礌鐨勬暣涓唴瀹规锛屽悓鏃朵繚鎸佸叾绾垫í姣斻€俹bject-fit鐨勫彇鍊煎寘鎷琭ill銆乶one銆乧ontain銆乧over锛屽拰background-size绫讳技锛屽彲浠ョ被姣斾负鍐呭瓨銆備篃鍙互鐪嬭繖寮犲浘锛屽緢瀹规槗鐞嗚В锛歰bject-fit杩樻湁涓€涓敮鎸佸睘鎬bject-position锛屽彲浠ユ帶鍒跺浘鐗囧湪鍏禼ontentbox涓殑浣嶇疆銆傦紙绫讳技浜巄ackground-position锛夛紝榛樿鏄痮bject-position:50%50%锛屽鏋滀笉鎯宠鍥剧墖灞呬腑鏄剧ず锛屽彲浠ョ敤瀹冩潵鏀瑰彉鍥剧墖鐨勫疄闄呬綅缃€倁lliimg{瀹藉害锛?50px锛涘楂樻瘮锛?/2锛涢€傚悎瀵硅薄锛氳鐩栵紱object-position:50%100%;}鍍忚繖鏍穙bject-position:100%50%琛ㄧず鍥惧儚搴旇浠庡簳閮ㄦ樉绀恒€傝繖鏄竴涓緢濂界殑婕旂ず锛屽彲浠ュ府鍔╂偍浜嗚В瀵硅薄浣嶇疆銆侰odePenDemo--Objectposition浣跨敤image-rendering璁剧疆鍥惧儚缂╂斁绠楁硶鍜屼笂闈㈢殑鏂扮壒鎬х浉姣旓紝image-rendering浼氭瘮杈冨喎闂ㄣ€傚緢澶氭椂鍊欙紝鎴戜滑灏嗕竴寮犲浘鐗囧湪椤甸潰涓婄殑鏄剧ず灏哄璁剧疆涓?00pxx200px锛屼絾鍥剧墖鐨勫師濮嬪昂瀵稿彲鑳芥槸800pxx800px锛屾垨鑰?0pxx50px銆傝繖鏃跺€欐垜浠彲浠ヤ娇鐢╥mage-rendering鏉ヨ缃缉鏀剧姸鎬佷笅鍥剧墖鐨勬樉绀虹畻娉曘€傚浘鍍忔覆鏌撳湪鏌愪簺鎯呭喌涓嬪彲浠ュ垱閫犲杩广€傝鎴戜滑鏉ョ湅鐪嬭繖鏍蜂竴涓湁瓒ｇ殑DEMO銆傚亣璁炬垜浠湁杩欐牱涓€涓師鍥炬晥鏋滐紝鏄竴涓昂瀵镐负100pxx100px鐨勪簩缁寸爜锛氬鏋滄垜浠妸瀹冩斁澶у埌寰堝ぇ锛屾樉鐒讹紝浜岀淮鐮佷細鍙樺舰銆傚儚杩欐牱锛歄K锛屽湪鏀惧ぇ鍜岀暩鍙樼殑鎯呭喌涓嬶紝鍙互浣跨敤image-rendering鏉ユ敼鍙榠magescaling绠楁硶銆傝繖閲屾垜浠皾璇昳mage-rendering:pixelated:.img{image-rendering:pixelated;}鏁堟灉鍙戠敓鍙樺寲锛屽涓嬪浘鎵€绀猴細鍙互鐪嬪埌锛岀粡杩噄mage-rendering:pixelated澶勭悊鍚庣殑鍥惧儚鍙樺緱濡傛娓呮櫚锛丆odePenDemo--QrCodeImage-renderingdemo鐪媔mage-rendering鐨勫嚑涓€硷細image-rendering:auto:鑷狦ecko1.9(Firefox3.0)璧凤紝Gecko浣跨敤鍙岀嚎鎬?bilinear)绠楁硶杩涜閲嶉噰鏍?楂樿川閲?銆俰mage-rendering:smooth锛氫娇鐢ㄦ渶澶у寲鍥惧儚瀹㈣澶栬鍜屾劅瑙夌殑绠楁硶缂╂斁鍥惧儚image-rendering锛歨igh-quality锛氫笌smooth鐩稿悓锛屼絾鏇村枩娆㈤珮璐ㄩ噺缂╂斁銆俰mage-rendering:crisp-edges锛氬繀椤讳娇鐢ㄤ竴绉嶇畻娉曞鍥惧儚杩涜缂╂斁锛岃绠楁硶鍙互鏈夋晥鍦颁繚鐣欏浘鍍忎腑鐨勫姣斿害鍜岃竟缂橈紝骞朵笖鍦ㄥ鐞嗚繃绋嬩腑鏃笉浼氬钩婊戦鑹蹭篃涓嶄細缁欏浘鍍忓紩鍏ユā绯娿€傚悎閫傜殑绠楁硶鍖呮嫭鏈€杩戦偦绠楁硶鍜屽叾浠栭潪骞虫粦缂╂斁绠楁硶锛屼緥濡?脳SaI鍜宧qx-*绯诲垪绠楁硶銆傝灞炴€у€奸€傜敤浜庡儚绱犺壓鏈紝渚嬪涓€浜涚綉椤垫父鎴忎腑鐨勫浘鍍忋€俰mage-rendering:pixelated:鏀惧ぇ鍥惧儚鏃讹紝浣跨敤鏈€杩戦偦绠楁硶锛屽洜姝ゅ浘鍍忕湅璧锋潵鏄敱澶у潡鍍忕礌缁勬垚鐨勩€傜缉灏忓浘鐗囨椂锛岀畻娉曞悓auto銆傝櫧鐒惰鑼冨畾涔変簡寰堝鍊硷紝浣嗗疄闄呬笂鐜颁唬娴忚鍣ㄥ熀鏈彧鏀寔锛歛uto銆乸ixelated銆?webkit-optimize-contrast锛圕hrome涓嬪钩婊戯級銆傞槄璇绘弿杩颁細寰堟贩涔便€傚疄闄呬娇鐢ㄦ椂锛屾渶濂芥瘡涓€绉嶉兘璇曚竴涓嬶紝楠岃瘉涓€涓嬫晥鏋溿€傜患涓婃墍杩帮紝image-rendering鐨勪綔鐢ㄥ氨鏄湪鍥惧儚鏀惧ぇ缂╁皬鏃舵彁渚涗笉鍚岀殑娓叉煋鏂瑰紡锛屼娇鍥惧儚鐨勬樉绀哄舰寮忔洿鍔犲鏍峰寲锛屾垨鑰呭噺灏戝浘鍍忓け鐪熷甫鏉ョ殑淇℃伅鎹熷け銆傚浘鍍忓敖鍙兘澶氥€傚啀鐪嬩竴涓狣EMO锛屽師鍥惧涓嬶細瀹為檯鏁堟灉锛氬綋鐒讹紝鍍忕礌鍖栧悗鐨勬晥鏋滅湅璧锋潵寰堝ソ锛屽洜涓鸿繖鏄竴寮犵煝閲忓寲鐨勫浘鐗囷紝缁嗚妭寰堝皯锛屼笉澶€傚悎楂樼簿搴︾殑浜虹墿鍥剧墖.閫傜敤浜庡儚绱犲寲銆傚緢瀹规槗灏嗗浘鐗囨墦椹禌鍏嬨€傜湡姝ｇ殑瑙勮寖甯屾湜璁╁浘鐗囧湪鏀惧ぇ鍚庡敖鍙兘涓嶅け鐪熺殑鑴嗚竟鏁堟灉娴忚鍣ㄨ繕娌℃湁瀹炵幇銆傜◢鍚庡彲浠ユ湡寰呫€侰odePenDemo--Image-renderingdemo涓轰簡鎬荤粨杩欎竴绔狅紝鎴戜滑浠嬬粛浜?涓緝鏂扮殑CSS鐗规€э細aspect-ratio锛氭帶鍒跺鍣ㄧ殑绾垫í姣旓紝閬垮厤甯冨眬鍋忕Щ鍜屾姈鍔╫bject-fit锛氳缃唴瀹瑰浣曢€傚簲妗嗗叿鏈変竴瀹氱殑楂樺害鍜屽搴︼紝閬垮厤鍥惧儚鎷変几object-position锛氬熀浜巓bject-fit锛岃缃浘鍍忓疄闄呮樉绀虹殑浣嶇疆鑼冨洿image-rendering锛氭帶鍒跺浘鍍忓湪缂╂斁鐘舵€佷笅鐨勬樉绀虹畻娉曞苟鍚堢悊浣跨敤锛屽彲浠ョ粰鐢ㄦ埛鏇村ソ鐨勫浘鐗囦綋楠屻€傚綋鐒讹紝鏈枃鏄幇浠ｇ敾闈㈡€ц兘浼樺寲涓庝綋楠屼紭鍖栨寚鍗楃殑绗笁绡囥€傚悗缁皢涓哄ぇ瀹跺甫鏉ュ浘鐗囪繘鏉ワ細鎳掑姞杞?寮傛鍥剧墖瑙ｇ爜鏂规鏃犻殰纰嶏紝浠ュ強鍥剧墖璧勬簮瀹归敊鍜岄敊璇鐞嗙殑鐜颁唬瑙ｅ喅鏂规銆傛湁鍏磋叮鐨勫彲浠ユ彁鍓嶅叧娉ㄣ€傜粓浜嶰K浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽氨涓嶈閿欒繃鎴戠殑鍏紬鍙封€斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆傛湰鏂囧弬鍔犱簡SegmentFault鎬濈淮鍐欎綔鎸戞垬璧涳紝娆㈣繋姝ｅ湪闃呰鐨勪綘鍔犲叆銆?/p>
