CSS3 background-size ÊôÐÔ

ʵÀý

¹æ¶¨±³¾°Í¼ÏñµÄ³ß´ç£º

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Ç××ÔÊÔÒ»ÊÔ

ä¯ÀÀÆ÷Ö§³Ö

IE Firefox Chrome Safari Opera

IE9+¡¢Firefox 4+¡¢Opera¡¢Chrome ÒÔ¼° Safari 5+ Ö§³Ö background-size ÊôÐÔ¡£

¶¨ÒåºÍÓ÷¨

background-size ÊôÐԹ涨±³¾°Í¼ÏñµÄ³ß´ç¡£

ĬÈÏÖµ£º auto
¼Ì³ÐÐÔ£º no
°æ±¾£º CSS3
JavaScript Óï·¨£º object.style.backgroundSize="60px 80px"

Óï·¨

background-size: length|percentage|cover|contain;
Öµ ÃèÊö ²âÊÔ
length

ÉèÖñ³¾°Í¼ÏñµÄ¸ß¶ÈºÍ¿í¶È¡£

µÚÒ»¸öÖµÉèÖÿí¶È£¬µÚ¶þ¸öÖµÉèÖø߶ȡ£

Èç¹ûÖ»ÉèÖÃÒ»¸öÖµ£¬ÔòµÚ¶þ¸öÖµ»á±»ÉèÖÃΪ "auto"¡£

²âÊÔ
percentage

ÒÔ¸¸ÔªËصİٷֱÈÀ´ÉèÖñ³¾°Í¼ÏñµÄ¿í¶ÈºÍ¸ß¶È¡£

µÚÒ»¸öÖµÉèÖÿí¶È£¬µÚ¶þ¸öÖµÉèÖø߶ȡ£

Èç¹ûÖ»ÉèÖÃÒ»¸öÖµ£¬ÔòµÚ¶þ¸öÖµ»á±»ÉèÖÃΪ "auto"¡£

²âÊÔ
cover

°Ñ±³¾°Í¼ÏñÀ©Õ¹ÖÁ×ã¹»´ó£¬ÒÔʹ±³¾°Í¼ÏñÍêÈ«¸²¸Ç±³¾°ÇøÓò¡£

±³¾°Í¼ÏñµÄijЩ²¿·ÖÒ²ÐíÎÞ·¨ÏÔʾÔÚ±³¾°¶¨Î»ÇøÓòÖС£

²âÊÔ
contain °ÑͼÏñͼÏñÀ©Õ¹ÖÁ×î´ó³ß´ç£¬ÒÔʹÆä¿í¶ÈºÍ¸ß¶ÈÍêÈ«ÊÊÓ¦ÄÚÈÝÇøÓò¡£ ²âÊÔ

Ç××ÔÊÔÒ»ÊÔ - ʵÀý

À­Éì±³¾°Í¼Ïñ
À­Éì±³¾°Í¼ÏñÀ´ÍêÈ«¸²¸ÇÄÚÈÝÇøÓò¡£
À­Éì±³¾°Í¼Ïñ£¬¶Ô±³¾°Í¼Ïñˮƽ¸´ÖÆËÄ´Î
¶Ô±³¾°Í¼Ïñ½øÐÐÀ­É죬ÒÔʹ±³¾°Í¼ÏñÇ¡ºÃˮƽ¸´ÖÆËĴΡ£

Ïà¹ØÒ³Ãæ

CSS3 ½Ì³Ì£ºCSS3 ±³¾°

VUE