图片在固定宽高盒子中的显示问题
我们经常可能会遇到这样一个情况：
有人可能会说，那还不简单，图片宽高设置成父级盒子的宽高不就行了？
举个例子：
结果很显然，如果图片比例与父级盒子比例不对，则很容易造成图片变形：
所以我们往往会直接不限制图片的高度，让图片溢出部分隐藏。
但是这并不是最佳的显示效果，最佳效果应该是让整个图片居中放置。所以有些人可能会用JS去计算，而有些人直接就用背景图片替代，因为背景图片可以直接设置 background-size: cover ，效果就像这样：
然而，事实上，还有一种既可以不用JS，又可以不用背景图片的完美解决方案。
那就是使用CSS中的 object-fit 属性。
该属性一般作用于图片或视频标签上，主要有以下五种属性值：
当然还有三个基本上不用的属性，它们显示的效果相当于未设置该属性，本文不做细讲。
接下来以具体实例分别讲讲以上五个主要的属性值。
图片可能变形，效果同图一。
类似于 background-size: contain ，图片可以完整显示，如图四。
类似于 background-size: cover ，图片会被裁切（只有当图片实际宽高比与样式设置的宽高比正好一致时才不会被裁切），效果同图三。
图片 宽高 保持不变，可能出现以下两种情况。
① 图片实际宽度大于样式设置的宽度（或图片实际高度大于样式设置的高度）
图片会被裁切，如图五。（图片实际宽高为512*512）
② 图片实际宽度小于样式设置的宽度（或图片实际高度小于样式设置的高度）
图片不会被裁切，如图六。
图片 宽高比 保持不变，同样也可能出现以下两种情况。
① 图片实际宽度大于样式设置的宽度（或图片实际高度大于样式设置的高度）
效果与 object-fit: contain 一致，如图四。
② 图片实际宽度小于样式设置的宽度（或图片实际高度小于样式设置的高度）
效果与 object-fit: none 一致，如图六。
object-position 属性规定了指定元素的替换内容在其盒子内的对齐方式，与 background-position 类似，默认为居中，该属性实际用到的情况比较少，本文不再具体展开。
兼容性整体还可以，移动端基本没什么问题，只可惜还是IE……
绛旓細鍥剧墖 瀹介珮 淇濇寔涓嶅彉锛屽彲鑳藉嚭鐜颁互涓嬩袱绉嶆儏鍐点鈶 鍥剧墖瀹為檯瀹藉害澶т簬鏍峰紡璁剧疆鐨勫搴︼紙鎴栧浘鐗囧疄闄呴珮搴﹀ぇ浜庢牱寮忚缃殑楂樺害锛夊浘鐗囦細琚鍒锛屽鍥句簲銆傦紙鍥剧墖瀹為檯瀹介珮涓512*512锛夆憽 鍥剧墖瀹為檯瀹藉害灏忎簬鏍峰紡璁剧疆鐨勫搴︼紙鎴栧浘鐗囧疄闄呴珮搴﹀皬浜庢牱寮忚缃殑楂樺害锛夊浘鐗囦笉浼氳瑁佸垏锛屽鍥惧叚銆傚浘鐗 瀹介珮姣 淇濇寔涓嶅彉锛屽悓鏍...
绛旓細3. 閫忔槑搴﹁缃笉姝ｇ‘锛氬鏋滆创鍥惧浘灞傜殑閫忔槑搴﹁缃繃浣锛屽彲鑳戒細瀵艰嚧璐村浘鏃犳硶娓呮櫚鏄剧ず鍦ㄧ洅瀛愪笂銆傜‘淇濋忔槑搴﹁缃湪鍚堥傜殑鑼冨洿鍐咃紝閫氬父涓100%銆4. 閬僵鎴栬挋鐗堥棶棰锛氬鏋滅洅瀛愪笂鏈夐伄缃╂垨钂欑増灞傦紝鍙兘浼氶樆姝㈣创鍥炬甯告樉绀恒傛鏌ュ苟纭繚閬僵鎴栬挋鐗堢殑璁剧疆姝ｇ‘銆5. 鍥剧墖妯″紡鎴栭鑹查厤缃棶棰橈細濡傛灉鍥剧墖鐨勮壊褰╂ā寮忔垨棰滆壊閰嶇疆涓...
绛旓細灏嗙埗鐩掑瓙璁剧疆涓簍able-cell(鑳藉浣垮厓绱犲憟鍗曞厓鏍肩殑鏍峰紡鏄剧ず)锛屽苟璁剧疆text-align:center(浣垮唴瀹规按骞冲眳涓)锛泇ertical-align:middle(浣垮唴瀹瑰瀭鐩村眳涓);銆傚瓙鐩掑瓙璁剧疆涓篿nline-block鍙互浣垮叾鍐呭鍙樹负鏂囨湰鏍煎紡锛屼篃鍙缃瀹介珮锛涙鏂规硶鐖剁骇闇璁剧疆鎸囧畾楂樺害鍜屽搴︼紝璐熻矗鏃犳晥 3.鍒╃敤flex寮规х洅瀛 璇﹁В锛氫娇鐢ㄥ脊鎬鐩掑瓙鐨鏃...
绛旓細涔熷氨鏄锛岀綉椤电殑瀹藉害鏄100vw锛屽彇涓鍗婂氨鏄50vw锛屾棤璁烘庝箞缂╂斁閮芥槸涓鍗婏紝鑰屼笖杩欎釜涓鍗婁笉姝㈠彲浠ョ敤鍦╳idth涓娿傛墍浠ワ細涓涓鏂瑰舰灏卞嚭鏉ヤ簡~ 鍏跺畠姣斾緥 璺熶笂闈竴鏍凤紝閫氳繃鍏紡鍙互寰楀埌锛鐩掑瓙鐩稿瀹氫綅锛鍥剧墖缁濆瀹氫綅锛屽搴100%锛屽氨鑳介摵婊″暒~缁欑洅瀛愬姞涓婅儗鏅浘鐗囧氨鑳芥悶瀹氾紒瀹屾暣锛氬弬鑰 https://www.jians...
绛旓細鍙兘鏄洅瀛愬ぇ灏忓拰鍥剧墖澶у皬涓嶅搴锛屼綘鍙互娣诲姞涓涓猳verflow:hidden锛//婧㈠嚭閮ㄥ垎闅愯棌 褰撶劧寤鸿鏈濂芥槸鎶婂浘鐗囪涓鸿儗鏅紝杩欐牱姣旇緝濂芥搷浣
绛旓細瀹藉害:150px 楂樺害:150px 鏄剧ず:琛ㄦ牸鍗曞厓锛涙枃鏈榻:灞呬腑锛涘瀭鐩村榻:灞呬腑锛泒 img{ 鏈澶у搴:100%锛涙渶澶ч珮搴:100%锛泒 5.鏁堟灉濡備笅锛屼腑闂村緢濂界殑瀹炵幇浜嗐6.浠ヤ笂鏄痙iv涓篺loat鐨勬儏鍐点傚鏋淒iv鏄粷瀵圭殑鎴鍥哄畾鐨锛屽畠涔熷彲浠ユ甯稿伐浣溿傚彧鏈変竴涓猟iv锛屼唬鐮佸涓 img src=鍥剧墖鍦板潃>/img> 閮ㄩ棬{ 淇濊瘉閲:5px 濉...
绛旓細绗竴绉嶏紝鍙互鍏堟煡鐪鍥剧墖鐨勯珮搴锛屾妸鐩掑瓙鐨勯珮搴璁剧疆璺熷浘鐗囩殑楂樺害涓鏍烽珮 绗簩绉 缁欏浘鐗囪缃畍ertical-align:top/middle/bottom鍧囧彲浠 <!DOCTYPE html> div1{ background-color: orange;} img{ vertical-align: top;} 鏈夌紳闅欑殑鏁堟灉鎴浘 瑙ｅ喅鍔炴硶锛氱涓绉嶅彲浠ユ妸鍑犱釜span鏍囩鍦ㄤ竴琛屽啓瀹...
绛旓細浣犵殑鍥剧墖鏄斁鍦鐩掑瓙鐨鏈閲屽眰锛岃繕鏄渶澶栧眰锛岋紝杩欎釜鏄剧ず鏄偗瀹氬彲浠ョ殑锛岋紝鍙兘鏄綘鐢ㄥ埆鐨勭洅瀛愮粰閬洊浣忎簡锛屾垨鑰呰浣鐩掑瓙楂樺害娌℃湁锛
绛旓細杩欐槸涓涓暟瀛闂銆傚綋鐩掑瓙妯″瀷鍜鍥剧墖姣斾緥涓嶄竴鑷存椂锛岃淇濇寔姣斾緥鏄剧ず浼氬嚭鐜颁袱绉嶆儏鍐碉細涓绉嶆槸瑕嗙洊瑁佸壀background-size: cover锛屽嵆浠ョ煭杈逛负鏍囧噯锛屽浘鐗囩缉鏀鹃摵婊℃暣涓鍣ㄧ殑瀹介珮锛屽鍑烘潵鐨勯儴鍒嗕細瑁佸壀鎺夛紱鍙︿竴绉嶆槸瀹屾暣鍖呭惈background-size: contain锛屽嵆浠ラ暱杈逛负鏍囧噯锛屽浘鐗囩缉鏀惧畬鍏ㄥ睍绀哄湪瀹瑰櫒鐨勫唴閮紝涓嶈冻鐨勯儴鍒嗕細...
绛旓細鍙兘浣犲湪璁剧疆css鐨勬椂鍊欎笉灏忓績璁剧疆鍒颁簡锛岄噸鏂拌缃竴涓嬪氨琛屼簡
