Azimio la wachunguzi linakua daima na wakati wa kuweka kurasa za wavuti tunapaswa kuzingatia zaidi mbalimbali ruhusa. Hii ni muhimu hasa wakati wa kutumia picha ya mandharinyuma, ambayo hukatwa kwa azimio la chini la kufuatilia, au, kinyume chake, haifai kabisa katika azimio la juu. Suluhisho mojawapo kwa hali hii ni kuongeza usuli. Kwa kweli, hii inaahidi shida kadhaa, kama vile kuonekana kwa upotovu na mabaki kwenye picha, lakini pia huongeza safu ya zana za mpangilio.

Ukubwa unadhibitiwa na sifa ya ukubwa wa mandharinyuma; thamani inaweza kubainishwa neno kuu cover , basi ukubwa wa picha utakuwa hivyo kwamba upana na urefu wake uingie kwenye eneo maalum (kwa mfano, dirisha la ukurasa wa wavuti); Neno kuu la vyenye huweka mizani ya picha ili angalau upande mmoja wa picha utoshee kabisa katika eneo lililobainishwa. Kwa kuongeza, inakubalika kuonyesha vipimo vya mlalo au wima kwa asilimia au nyinginezo. vitengo vya CSS. Katika Mtini. 1 inaonyesha mabadiliko katika saizi za picha wakati maana tofauti saizi ya usuli . Kijivu block ya 280x200 saizi imechaguliwa, ndani ambayo background ni kuweka.

Mchele. 1. Aina ya picha za mandharinyuma kulingana na thamani ya ukubwa wa usuli

Ikiwa maadili mawili ya ukubwa yameainishwa kutengwa na nafasi, basi thamani ya kwanza huamua upana wa usawa, na ya pili huamua upana wa wima. Katika kesi hii, uwiano hupuuzwa, ambayo inaonekana wazi katika Mtini. 1 mwaka Badala ya moja ya ukubwa, inaruhusiwa kutumia neno la msingi auto , kisha kivinjari huhesabu moja kwa moja kulingana na uwiano wa picha.

Mfano wa 1 huweka picha ya mandharinyuma ambayo inachukua dirisha lote la kivinjari.

Mfano 1. Picha ya usuli

Matokeo mfano huu inavyoonyeshwa kwenye Mtini. 2. Unapobadilisha ukubwa wa dirisha, picha itakua au kupungua ili kujaza ukurasa mzima wa wavuti.

Kutoka kwa mwandishi: Katika somo hili tutaangalia mbinu rahisi kuunda picha ya mandharinyuma ambayo itanyoosha kabisa katika upana mzima wa tovuti ya kutazama ya kivinjari. Ili kufanya hivyo, tunahitaji mali ya CSS ya ukubwa wa usuli; Hakuna JavaScript inahitajika.

Mifano ya picha kamili za usuli kamili

Siku hizi, imekuwa maarufu sana kutumia picha kubwa kama usuli, ambayo inachukua ukurasa mzima wa wavuti. Hapa kuna mifano ya tovuti kadhaa ambazo zina picha za mandharinyuma zinazojibu:

Ikiwa ungependa kufikia matokeo sawa katika mradi wako unaofuata wa wavuti, basi makala hii ndiyo unayohitaji.

Kanuni za msingi

Huu hapa ni mpango wetu wa utekelezaji.

Tumia kipengele cha ukubwa wa mandharinyuma ili kujaza kabisa kituo cha kutazama

Sifa ya CSS ya ukubwa wa usuli imewekwa kufunika. Thamani ya jalada huambia kivinjari kuongeza kiotomatiki na sawia upana na urefu wa picha ya usuli ili iwe sawa na au kubwa zaidi ya upana/urefu wa kituo cha kutazama.

Tumia hoja ya midia kushughulikia picha ndogo za mandharinyuma za vifaa vya mkononi

Ili kuboresha kasi ya upakiaji wa ukurasa kwenye skrini ndogo, tutatumia hoja ya midia kuchakata toleo dogo la picha yetu ya usuli. Sio wajibu. Mbinu hii itafanya kazi bila hiyo. Lakini kwa nini ni wazo nzuri kutumia picha ndogo ya mandharinyuma kwa vifaa vya rununu?

Picha niliyotumia kwenye onyesho ina azimio la 5500x3600px. Azimio hili linatosha kwa skrini nyingi pana wachunguzi wa kompyuta, inapatikana kwa kuuza kwa sasa. Lakini kwa hili utalazimika kusindika faili ya 1.7MB kwa saizi.

Mzigo mkubwa kama huo wa ziada kwa ajili ya uwekaji tu upigaji picha wa mandharinyuma Hata hivyo haitafaa. Na, kwa kweli, hii itakuwa na athari mbaya sana kwenye miunganisho inayotumia Mtandao wa rununu. Azimio hili pia ni la ziada kwa vifaa vilivyo na skrini ndogo (tutaangalia hili kwa undani zaidi baadaye). Hebu tuangalie mchakato mzima.

HTML

Unachohitaji kwa markup ni hii:

Sisi ni kwenda kuteua picha ya mandharinyuma kwa kipengele cha mwili ili picha ijaze kila mara eneo lote la kutazama la kivinjari.

Hata hivyo, mbinu hii pia itafanya kazi kwa mtu yeyote kipengele cha kuzuia(mfano div au fomu). Ikiwa upana na urefu wa kipengee chako cha kuzuia ni majimaji, basi picha ya usuli itaongezeka kila wakati kujaza chombo kizima.

CSS

Weka mitindo ifuatayo kwa kipengele cha mwili:

mwili ( /* Njia ya picha */ background-picha: url(images/background-photo.jpg); /* Picha ya usuli kila wakati huwekwa katikati wima na mlalo */ nafasi ya usuli: katikati; /* Picha ya usuli hairudiwi * / background-repeat: hakuna-repeat /* Picha ya mandharinyuma imesasishwa kwenye lango la kutazama, kwa hivyo haisogei wakati urefu wa maudhui ni mkubwa kuliko urefu wa picha */ background-attach: fasta; Hiki ndicho kinachoruhusu taswira ya usuli kuzoea saizi ya chombo */chini-chini: kifuniko /* Seti rangi ya mandharinyuma, ambayo itaonyeshwa wakati picha ya usuli inapakia */ background-color: #464646; )

mwili ( /* Njia ya picha */ picha ya usuli : url ( taswira / usuli - picha . jpg ) ; /* Picha ya usuli kila wakati huwekwa katikati wima na mlalo */ /* Picha ya usuli hairudiwi */ background - kurudia: hakuna - kurudia; /* Picha ya mandharinyuma imesasishwa katika eneo la kutazama ili isisogee wakati urefu wa maudhui ni mkubwa kuliko urefu wa picha */ /* Hii ndio inaruhusu picha ya usuli kuzoea saizi ya kontena */ ukubwa wa mandharinyuma: kifuniko; /* Huweka rangi ya usuli ambayo itaonyeshwa wakati picha ya usuli inapakia */ background - rangi : #464646;

Jozi muhimu zaidi ya mali/thamani ya kuzingatia ni:

saizi ya asili: kifuniko;

ukubwa wa mandharinyuma: kifuniko;

Hapa ndipo uchawi unapoanza. Jozi hii ya mali/thamani huambia kivinjari kuongeza picha ya usuli sawia, i.e. ili upana na urefu wake ni sawa au kubwa zaidi kuliko upana / urefu wa kipengele (kwa upande wetu, kipengele cha mwili).

Walakini, kuna shida moja na jozi hii ya mali/thamani: ikiwa picha ya usuli ni ndogo kuliko kipengele cha mwili, nini kitatokea kwenye skrini na azimio la juu na/au unapokuwa na kiasi kikubwa cha maudhui kwenye ukurasa, bila shaka kivinjari kitavuta picha. Na kama tunavyojua, tunapoongeza saizi bitmap, ubora wa picha hupungua (kwa maneno mengine, pixelation hutokea).

Kuongeza saizi ya picha kutoka kwa saizi yake ya asili huathiri ubora wa picha. Kumbuka hili unapochagua picha inayofaa. Onyesho hilo linatumia picha kubwa ya 5500x3600px wachunguzi wa skrini pana, kwa hivyo itachukua mengi skrini kubwa ili uharibifu wa ubora utokee. Hebu tuendelee. Ili kuhakikisha kuwa taswira ya usuli kila wakati imejikita kwenye tangazo, tutaandika:

background-msimamo: kituo cha katikati;

nafasi ya nyuma: kituo cha katikati;

Ingizo hili linaweka usuli kwenye mhimili wa kuratibu katikati ya lango la kutazama. Ifuatayo tunahitaji kufafanua kinachotokea wakati urefu wa maudhui unazidi urefu unaoonekana wa lango la kutazama. Wakati hii itatokea, bar ya kusogeza inaonekana.

KATIKA kwa kesi hii tunahitaji kuhakikisha kuwa picha ya usuli inasalia katika nafasi yake ya asili hata wakati mtumiaji anasogeza chini ya ukurasa. Katika hali hii, picha itaisha tu wakati wa kusogeza, au itasogea kadiri usomaji unavyoendelea (jambo ambalo linaweza kuvuruga sana mtumiaji). Ili kurekebisha usuli, tunaweka kipengee cha kiambatisho cha usuli kusasishwa.

background-attachment: fasta;

background - attachment: fasta;

Katika onyesho, niliongeza chaguo la "maudhui ya kupakia" ili uweze kuona kinachotokea wakati upau wa kusogeza unaonekana kwenye kivinjari wakati sifa ya kiambatisho cha usuli imewekwa kusasishwa. Unaweza pia kupakua onyesho na kucheza na thamani za sifa za kuweka (kama vile kiambatisho cha usuli na nafasi ya usuli) ili kuona jinsi inavyoathiri usogezaji wa ukurasa na taswira ya usuli. Thamani zingine za mali zinajieleza vizuri.

CSS Shorthand

Nimeelezea kwa undani sifa za mandharinyuma ili kuzifanya iwe rahisi kuzielezea. Fomu iliyofupishwa pia itakuwa sawa:

mwili ( usuli: url(background-photo.jpg) jalada la katikati halijarudiwa;

mwili ( usuli: url (chini-chini-picha. jpg) jalada la katikati halina kurudiwa;

Unachohitaji kufanya ni kubadilisha thamani ya url ili kuelekeza kwenye taswira yako ya usuli.

Hiari: Hoja ya media kwa skrini ndogo

Kwa skrini ndogo nilitumia Mpango wa Photoshop ili kupunguza kwa uwiano picha asilia ya usuli hadi 768x505px, na pia nilitumia Smush.it kupunguza saizi zaidi kidogo. Shukrani kwa hili, ukubwa wa faili ulipungua kutoka 1741KB hadi 114KB. Wale. saizi ya picha imepunguzwa kwa 93%.

Tafadhali usinielewe vibaya, 114KB bado ni nyingi kwa kipengele cha muundo wa urembo. Kwa kuzingatia mzigo wa ziada wa 114KB, ningetumia faili kama hiyo tu ikiwa ningeona fursa ya kuboresha kwa kiasi kikubwa uzoefu wa mtumiaji (UX) wa tovuti, kwa sababu... V kwa sasa sehemu kubwa ya trafiki ya mtandao inatokana na picha ya vifaa vya mkononi: url (picha/background-photo-mobile-devices.jpg);

Hoja ya media ina kikomo cha upana wa upana wa max: 767px, ambayo inamaanisha kuwa ikiwa tovuti ya kutazama ya kivinjari ni kubwa kuliko 767px, picha kubwa ya mandharinyuma itapakiwa.

Upande wa chini wa kutumia swali hili la media ni kwamba ukibadilisha upana wa dirisha la kivinjari chako kutoka, kwa mfano, 1200px hadi 640px (au kinyume chake), utaona mara moja wakati picha ndogo au kubwa ya mandharinyuma inapakia.

Mbali na hili, kutokana na ukweli kwamba baadhi ya vifaa vidogo vya skrini vinaweza kuonyesha kiasi kikubwa saizi - kwa mfano, iPhone 5 c onyesho la retina yenye uwezo wa kuonyesha azimio la 1136x640px - picha ndogo ya mandharinyuma itakuwa ya pixelated.

Kufupisha

Unaweza kuona zaidi toleo la sasa msimbo wa chanzo kutoka kwa nakala hii ya mafunzo kwenye GitHub. Ninaweza kukuonya tu kuhusu jambo moja: tafadhali tumia mbinu hii kwa tahadhari kwa sababu faili kubwa zinaweza kuharibu sana UX, hasa ikiwa mtumiaji wa mwisho anatumia muunganisho wa polepole na usiotegemewa wa Intaneti. Hii ni sababu nyingine kwa nini unapaswa kuchagua rangi ya mandharinyuma inayofaa ili mtumiaji aweze kusoma maudhui wakati picha ya usuli inapakia.

Moja ya kazi kuu wakati mpangilio unaobadilika- hii ni kuongeza picha (pamoja na zile za nyuma) ili zionyeshwe kwa usahihi kwenye vifaa maazimio tofauti skrini.

Na picha kwenye lebo img Ni rahisi: unapoweka upana kama asilimia, urefu utaongezwa kiotomatiki. Mbinu hii haiwezi kutumika kwa picha za usuli.

Ujanja huu ni kuweka thamani ya asilimia ya pedi ( pedi) kipengele. Njia hiyo ilichapishwa kwanza katika nakala ya zamani ya blogi A List Apart, lakini bado inafanya kazi vizuri.

Hebu tuseme una picha ya usuli ya pikseli 800 kwa 450, na unataka kuifanya mandharinyuma yenye uwiano usiobadilika wa 16:9. Msimbo ulio hapa chini hutumia kujongeza px, lakini kila kitu kitafanya kazi nayo em. Pia kuna kipengele cha takwimu cha HTML5 cha operesheni sahihi katika vivinjari vya zamani unaweza kutumia HTML5 shiv.

Safu wima ya Div ( upana wa juu: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

Inaongeza usuli

Kipengele kinachofuata hupimwa kama inavyotarajiwa, lakini ukiongeza picha ya mandharinyuma, matokeo hayatakuwa mazuri sana. Kwa kutumia sifa saizi ya usuli: kifuniko. Kwa bahati mbaya, katika Internet Explorer 8 njia hii haifanyi kazi. Ili kutatua tatizo hili, tunaweka mandharinyuma kwa kutumia usuli-msimamo. Picha ya usuli lazima iwe angalau upana kama upana wa max kipengele. Vinginevyo, picha itapunguzwa.

Safu wima ya Div ( /* The picha ya mandharinyuma lazima iwe 800px upana */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); saizi ya usuli: cover; -moz-background-size: cover /* Firefox 3.6 */ background-position: center /* Internet Explorer 7/8 */ )

Hebu tuseme una picha kubwa ya usuli ambayo inaonekana nzuri kwenye eneo-kazi. Lakini juu kifaa cha mkononi itakuwa ndogo sana, hivyo suluhisho sahihi itakuwa kupunguza upana wa mandharinyuma.

Kwa mfano, picha yenye upana wa pikseli 800 kwa 200 (4:1) imewashwa skrini ndogo, yenye upana wa saizi 300, inapaswa kupunguzwa hadi saizi 150 (2: 1). Hebu tuhesabu sifa urefu Na padding-top:

Kielelezo kinaonyesha uwiano wa kipengele cha picha ya usuli wakati upana tofauti. Mteremko wa grafu unafanana na sifa padding-top, urefu wa kuanza - kwa sifa urefu. Nambari inayotokana ni:

Safu wima ya Div ( /* Picha ya usuli lazima iwe na upana wa 800px */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* mteremko */ urefu: 120px; /* urefu wa kuanzia */ background- picha: url(http://voormedia.com/examples/amsterdam.jpg); saizi-ya-nyuma-ya-moz: kifuniko; /* Firefox 3.6 */ nafasi ya nyuma: katikati /* Internet Explorer 7 /8 */ )

Kutumia SCSS kwa Hesabu

Sifa padding-top na urefu inaweza kuhesabiwa kiotomatiki kwa kutumia vichakataji awali kama vile SCSS. Mfano wa hii:

/* Kokotoa uwiano wa maji kulingana na vipimo viwili (upana/urefu) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -ndogo: nth($small-size, 1 $urefu-kubwa: nth($-kubwa, 2) $urefu-ndogo: nth($ndogo-size, 2); / ($ upana-kubwa - $ upana-ndogo: $ urefu-ndogo - $ upana * mteremko 100% ; ; /* Firefox 3.6 */ mandhari-nyuma: katikati /* Internet Explorer 7/8 */ ) kielelezo.fluidratio ( /* Kipengele hiki kitakuwa na uwiano wa maji kutoka 4:1 kwa 800px hadi 2:1 kwa 300px. */ @include fluid-ratio(800px 200px, 300px 150px picha ya usuli: url(http://voormedia.com/examples/amsterdam.jpg);

Teknolojia za wavuti, kama mitindo mbali mbali ya muundo, hazisimama, kwa hivyo kila wakati baadhi ya vipengele asili na nuances ya tovuti huonekana. Moja ya "maelekezo" haya ni matumizi ya mandharinyuma (backgorund), ambayo inaenea kwenye skrini nzima kwa upana na urefu. Kitu kama mwaka mmoja au zaidi uliopita nilisema - picha iliwekwa kwenye kichwa cha blogi na "kubadilishwa" vizuri hadi kwenye rangi kuu ya usuli ya ukurasa wa wavuti. Ukipenda, unaweza hata kuongeza.

Kuweka picha kubwa inayoweza kupanuka kama msingi ni kitu kipya na ngumu zaidi, suluhisho ambalo nimepata katika nakala hii.

Lengo somo hili weka picha ya mandharinyuma kwenye tovuti ambayo ingefunika kila mara usuli mzima wa dirisha la kivinjari. Ni nini hasa kinachohitajika kufanywa:

• jaza ukurasa mzima na picha moja bila nafasi;
• resize picha ikiwa ni lazima (kupunguza dirisha la kivinjari);
• kudumisha uwiano wa picha;
• kuweka picha katikati ya ukurasa;
• ukosefu wa baa za kusongesha kwenye ukurasa;
• suluhisho la kivinjari linalofaa kwa vivinjari tofauti;
• utekelezaji bila teknolojia zozote za wahusika wengine kama vile flash.

Kwa hivyo, kuna suluhisho kadhaa zinazofaa kwa mandharinyuma ya tovuti ya skrini nzima.

Suluhisho la ajabu, rahisi na linaloendelea kwa kutumia CSS3

Ili kukamilisha kazi hii, tunaweza kutumia sifa ya ukubwa wa usuli katika CSS3. Tutatumia kipengele cha html ambacho ni bora kuliko mwili. Wacha tuweke usuli kurekebishwa na kuwekwa katikati, kisha tutumie kifuniko cha thamani katika saizi ya usuli.

html ( mandharinyuma : url (picha/bg.jpg ) kituo cha kituo kisichorudiwa kimewekwa fasta ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size : jalada)

html ( usuli: url(images/bg.jpg) kituo cha kituo kisichorudiwa kimewekwa; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; saizi ya usuli: jalada)

Suluhisho linaungwa mkono na karibu wote maarufu kwenye mtandao:

• Firefox 3.6+ (Firefox 4 inasaidia toleo la kiambishi awali lisilo la muuzaji)
• Opera 10+ (Opera 9.5 inasaidia saizi ya usuli lakini bila thamani ya jalada)
• Chrome Vyovyote Vyovyote+
• IE 9+
• Safari 3+

Goltzman fulani alipata suluhisho linaloruhusu udukuzi huo kufanya kazi katika IE

chujio : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-chujio: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";

chujio: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale"");

Lakini tahadhari !!! hii inaweza kusababisha matatizo fulani na viungo kwenye ukurasa. Kwa njia, baadaye kidogo Matt Litherland aliongeza kuwa kanuni, kimsingi, inaweza kutumika lakini haiwezi kutumika kwa hili. vipengele vya html au mwili, lakini unahitaji kutekeleza kila kitu kupitia div na urefu na upana wa 100%.

CSS- hack nambari 1

Toleo mbadala linawasilishwa na Doug Neiner. Katika kesi hii, kipengele kilichowekwa kwenye ukurasa kinatumiwa , ambayo inaweza kubadilishwa ukubwa katika kivinjari chochote. Tunaweka thamani ya min-urefu, ambayo hujaza dirisha la kivinjari kwa wima, na kuweka upana hadi 100%, ambayo inajaza ukurasa kwa usawa. Pia tunaweka upana wa min ili picha isiwahi kuwa ndogo kuliko ilivyo.

img.bg ( /* Weka sheria za kujaza usuli */ min-urefu: 100%; upana mdogo: 1024px; /* Sanidi kipimo cha uwiano */ upana: 100%; urefu: auto; /* Sanidi nafasi */ nafasi: fasta; juu: 0; kushoto: 0; ) skrini ya @media na (upana wa juu : 1024px ) ( /* mahususi kwa picha hii */ img.bg ( kushoto : 50% ; ukingo-kushoto : -512px ; /* 50% */ ) )

img.bg ( /* Weka sheria za kujaza mandharinyuma */ urefu wa chini: 100%; upana wa min: 1024px; /* Weka kipimo cha uwiano */ upana: 100%; urefu: otomatiki; /* Weka nafasi */ nafasi: juu isiyobadilika: 0; kushoto: 0; ) skrini ya @media na (upana wa juu: 1024px) ( /* Mahususi kwa picha hii */ img.bg ( kushoto: 50%; pambizo-kushoto: -512px; / * 50% */ ))

Inafanya kazi katika matoleo yote ya vivinjari vya hali ya juu - Safari / Opera / Firefox na Chrome. Kama kawaida, IE ina nuances yake mwenyewe:

• IE 9 - inafanya kazi;
• IE 7/8 - mara nyingi hufanya kazi kwa usahihi, lakini haitoi picha ndogo kuliko dirisha la kivinjari;
• IE 6 - inaweza kubinafsishwa, lakini ni nani anayehitaji kivinjari hiki hata hivyo.

CSS-Hack chaguo 2

Chaguo jingine la kutatua shida na kwa kutumia CSS mitindo ni kuweka taswira ya ndani kwenye ukurasa ikiwa na msimamo uliowekwa upande wa kushoto kona ya juu, kisha weka upana wa min na urefu mdogo hadi 100% huku ukidumisha uwiano.

#bg (nafasi: fasta; juu: -50%; kushoto: -50%; upana: 200%; urefu: 200%;) #bg img (nafasi: kabisa; juu: 0; kushoto: 0; kulia: 0; chini: 0; upana wa otomatiki: 50%;

#bg ( nafasi:imewekwa; juu:-50%; kushoto:-50%; upana:200%; urefu:200%; ) #bg img (nafasi:kabisa; juu:0; kushoto:0; kulia:0; chini: 0; margin: otomatiki upana: 50% urefu wa chini: 50%;

Udukuzi hufanya kazi katika:

• Safari / Chrome / Firefox (pia matoleo ya mapema haijajaribiwa, lakini inafanya kazi vizuri katika za hivi karibuni)
• IE 8+
• Opera (toleo lolote) na pamoja na IE zote mbili ni buggy kwa njia sawa na hitilafu ya nafasi.

Njia na jQuery

Chaguo hili ni rahisi zaidi (kutoka kwa mtazamo wa CSS) ikiwa tunajua kuwa uwiano wa picha (img inayotumika kama mandharinyuma) ni kubwa au ndogo kuliko uwiano wa sasa wa dirisha la kivinjari. Ikiwa ni chini, basi tunaweza tu kutumia upana = 100% na dirisha litajazwa kwa usawa kwa upana na urefu. Ikiwa zaidi, unaweza tu kutaja urefu = 100% kujaza dirisha zima.

Data yote inapatikana kupitia JavaScript, nambari zinazotumiwa ni kama ifuatavyo.

#bg ( nafasi : isiyobadilika ; juu : 0 ; kushoto : 0 ; ) .bgwidth ( upana : 100% ; ) .bgheight ( urefu : 100% ; )

#bg ( nafasi: isiyobadilika; juu: 0; kushoto: 0; ) .bgwidth ( upana: 100%; ) .bgheight ( urefu: 100%; )

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() ( var theWindow = $(dirisha), $bg = $("#bg"), kipengeleRatio = $bg.width() / $bg.height(); chaguo la kukokotoa resizeBg() ( ikiwa ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

Kwa maoni yangu, centering haifanyiki katika kesi hii (kwa kadiri ninavyoelewa), lakini inaweza kufanyika. Vivinjari vingi vya eneo-kazi vinatumika, pamoja na IE7+. Hatimaye, mwandishi wa makala kuhusu hacks ameandaa seti ya faili za mfano ambazo haya yote yanatekelezwa - unaweza kuipakua. Maoni kwa nakala asili pia yana habari na majadiliano, ingawa mengi maelezo muhimu mwandishi aliongeza kwa namna ya miinuko kwenye chapisho na ninazifanya zitafsiriwe na kuonyeshwa. Bila shaka, mifano itakusaidia kuelewa haya yote. Kwa ujumla, ikiwa sio kwa "gags" za mara kwa mara kutoka kwa IE7, hacks zote zilizotajwa zingekuwa bora.

P.S. Unataka kununua kitabu? - sio lazima uende dukani kwa sababu sasa duka la vitabu la mtandaoni hukuruhusu kufanya kila kitu mtandaoni - chagua, ulipe na upange utoaji wa nyumbani.

Tafsiri: Vlad Merzhevich

Katika CSS 2.1, picha ya usuli inayotumika kwenye kontena huhifadhi yake saizi zisizohamishika. Kwa bahati nzuri, CSS3 ilianzisha sifa ya ukubwa wa usuli, ambayo inaruhusu mandharinyuma kunyooshwa au kubanwa. Ni bora ikiwa unaunda kiolezo cha muundo wa wavuti sikivu.

Kuna njia kadhaa za kufafanua ukubwa - angalia ukurasa wa onyesho wa ukubwa wa usuli.

Kubadilisha ukubwa kabisa

Vipimo vya kipimo vinaweza kutumika.

Ukubwa wa mandharinyuma: upana-urefu;

Kwa chaguo-msingi, upana na urefu huwekwa kwa auto , ambayo huondoka vipimo vya awali Picha.

Unaweza kuuliza saizi mpya picha zinazotumia vitengo kamili vya kipimo kama vile px, em, cm, n.k. Uwiano utabadilika ikiwa ni lazima. Kwa mfano, ikiwa picha yetu ya usuli ina vipimo vya pikseli 200x200, basi msimbo ufuatao utaondoka kwenye urefu huu, lakini fanya upana kuwa nusu kubwa:

Ukubwa wa mandharinyuma: 100px 200px;

Ikiwa thamani moja tu imetajwa, inachukuliwa kuwa upana. Urefu umewekwa kiotomatiki na uwiano huhifadhiwa:

Ukubwa wa mandharinyuma: 100px; /* sawa */ background-size: 100px otomatiki;

Msimbo huu hupima picha kutoka saizi 200x200 hadi 100x100.

Ukubwa wa jamaa hubadilika kupitia asilimia

Ikiwa asilimia itatumika, vipimo vinatokana na kipengele na SI picha:

Ukubwa wa mandharinyuma: 50% otomatiki;

Upana wa picha ya mandharinyuma kwa hivyo inategemea vipimo vya kontena. Ikiwa chombo kina upana wa 500px, basi ukubwa wa picha yetu utapunguzwa hadi 250x250.

Kutumia asilimia kunaweza kuwa na manufaa kwa muundo unaobadilika. Badilisha upana wa ukurasa wa onyesho ili kuona jinsi vipimo vinavyobadilika.

Kuongeza ukubwa wa juu zaidi

Sifa ya ukubwa wa mandharinyuma pia inaelewa vyenye neno muhimu. Inapunguza picha ili ijaze chombo. Kwa maneno mengine, picha itakua au kupungua kwa uwiano, lakini upana na urefu hautazidi vipimo vya chombo:

Ukubwa wa mandharinyuma: vyenye;

Jaza na usuli

Sifa ya ukubwa wa usuli pia inaelewa neno kuu la jalada. Picha itapimwa ili kujaza chombo kizima, lakini ikiwa uwiano wa vipengele ni tofauti, picha itapunguzwa.

Ukubwa wa mandharinyuma: kifuniko;

Kuongeza asili nyingi

Asili nyingi zinaweza kuongezwa kwa kutumia orodha iliyotenganishwa kwa koma ya thamani kwa mpangilio sawa.

Usuli: url("kondoo.png") 60% 90% hakuna kurudia, url("kondoo.png") 40% 50% hakuna kurudia, url("kondoo.png") 10% 20% hakuna kurudia # 393; saizi ya mandhari-nyuma: 240px 210px, otomatiki, 150px;

Inafanya kazi katika vivinjari

Matoleo ya hivi punde ya vivinjari vyote yanaauni saizi ya usuli bila viambishi awali.

IE8 na chini haitumii mali hii. Unaweza kutumia kichujio cha IE kuiga yaliyomo na maadili ya kufunika, lakini hakuna njia ya kubadilisha saizi picha ya mandharinyuma bila usaidizi wa hila kama vile kuongeza picha halisi nyuma ya vipengele vingine. Ni fujo, kwa hivyo ninapendekeza uharibifu wa neema.