Sa ngayon, ang mga website na may tumutugon na mga larawan sa background ay in demand. Ang mga tumutugon na website ay nagbibigay sa mga user ng perpektong karanasan ng user sa halos lahat ng device kabilang ang mga mobile, tablet, o desktop. Maaaring iakma ng mga tumutugong larawan ang background ng website, laki ng screen, at mga dimensyon. Tinitiyak ng mga tumutugon na larawan na napanatili ang kalidad at proporsyon. Bukod pa rito, mabilis na naglo-load ang website na may mga tumutugon na larawan sa background.
Ang gabay na ito ay magbibigay ng mga tagubilin upang iakma ang mga larawan sa background sa mga sukat ng screen.
Paano Iangkop ang Mga Larawan sa Background sa Mga Dimensyon ng Screen?
Ang imahe ay maaaring umangkop sa mga sukat ng screen sa pamamagitan ng pagdaan sa sunud-sunod na mga tagubilin na ibinigay sa ibaba.
Hakbang 1: Gumawa ng HTML Structure
Una, gumawa ng HTML structure at idagdag ang external style sheet gamit ang tag sa head section ng HTML. Para sa layuning iyon, ilagay lamang ang ' ” sa loob ng head tag. Ang ' rel Tinutukoy ng tag na ” ang kaugnayan ng file sa HTML na dokumento. Ang ' href Tinutukoy ng tag na ” ang CSS file address:
< html >
< ulo >
< link rel = 'stylesheet' href = 'style.css' >
< pamagat > Tumutugon na Larawan sa Background pamagat >
ulo >
< katawan >
-- Lugar upang idagdag ang iba pang nilalaman-- >
katawan >
html >
Hakbang 2: Ilapat ang CSS
Ngayon, ilapat ang CSS sa “ katawan ” seksyon. Una, tukuyin ang larawan sa background. Para sa layuning iyon, gamitin ang ' background-image 'at tukuyin ang' url() ” value na naglalaman ng address ng file ng larawan.
Pagkatapos nito, gamitin ang ' background-image ' upang tukuyin ang laki ng larawan, ang ' background-repeat ” property upang itakda ang pag-uulit ng larawan, at “ background-attachment ” upang itakda kung mag-ii-scroll ang imahe sa natitirang bahagi ng pahina o hindi. Panghuli, itakda ang ' margin 'at' padding 'sa' 0 ”:
katawan {background-image: url ( 'test-image.jpg' ) ;
laki ng background: 100 % 100 % ;
/* I-scale ang larawan sa 100 % lapad at 100 % taas */
background-repeat: walang-uulit;
background-attachment: naayos;
margin: 0 ;
padding: 0 ;
/* Opsyonal: Nakapirming background */
}
Output
Ito ang output bago kunin ang browser window:
Pagkatapos ng Pag-urong ng browser:
Kinukumpirma ng output sa itaas na inangkop ng larawan ang background sa mga sukat ng screen.
Konklusyon
Upang iakma ang mga larawan sa background sa mga sukat ng screen, isama muna ang ' viewport ” sa seksyon ng ulo upang kontrolin ang mga sukat at pag-scale. Pagkatapos, gumawa ng HTML structure at ilapat ang CSS. Sa CSS, itakda ang “ laki ng background 'halaga ng ari-arian sa ' takip ” value upang sukatin ang taas at lapad ng isang larawan. Ang artikulong ito ay nagpakita ng kumpletong gabay sa pag-angkop ng mga larawan sa background sa mga sukat ng screen.