Гипертекст тэмдэглэгээний хэл дээр (HTML) хуудсан дээрх дүрсийг харуулахын тулд "tag" гэсэн тусгай командыг ашигладаг. Энэ тэмдэглэгээг img гэж нэрлэдэг бөгөөд олон тооны хувьсагч агуулсан байдаг - "шинж чанарууд". Шинж чанаруудын тусламжтайгаар та гипертекст хуудсан дээрх дүрсийг харуулах бүх талыг, түүний хэмжээ зэргийг тодорхойлж болно. Гэсэн хэдий ч, энэ нь асуудлыг шийдэх цорын ганц арга биш бөгөөд та Cascading Style Sheets (CSS) ашиглан зургийн хэмжээг багасгах боломжтой.
Зааварчилгаа
1-р алхам
Өндөр ба өргөн шинж чанаруудыг хүссэн дүрсийг харуулах үүрэгтэй шошгонд байрлуулна уу. Эхнийх нь зургийн босоо хэмжээ, хоёр дахь нь хэвтээ байдлаар тохируулна. Хоёр тоог хоёуланг нь пикселээр тохируулах боловч энд нэгжийг зааж өгөх шаардлагагүй болно. Эдгээр шинж чанаруудад шаардлагатай утгыг тооцоолохдоо зургийн бууралтын харьцааг дагаж мөрдөхөд анхаарлаа хандуулаарай, эс тэгвээс гажуудсан хэлбэрээр харуулах болно. Жишээлбэл, SomePic.
Алхам 2
Та анхны зургийн хэмжээсүүдийн пропорциональ бууралтыг хувь хэмжээгээр тохируулж болно. Үүнийг хийхийн тулд зөвхөн өндрийн атрибутыг өргөнийг заахгүйгээр ашиглана уу, хэмжээг тодорхойлсон дугаарыг зааж өгсний дараа хувь тэмдэг нэмнэ үү. Жишээлбэл, та өмнөх маягтын жишээн дээр ижил үр дүнг энэ хэлбэрээр бичсэн шошготой хийж болно.
Алхам 3
Хэрэв та хэв маягийн тодорхойлолтыг ашиглан зургийн хэмжээг зааж өгөхийг хүсвэл ижил шошгоны нэрийг ашиглаарай - img - ба шинж чанарууд - өргөн ба өндрийг ашиглана уу. Энэ тохиолдолд хэмжлийн нэгжүүд - px, pt эсвэл% - -ийг үргэлж зааж өгөх ёстой. Хуудсан дээрх бүх зургуудын хэмжээг хоёр дахин багасгахын тулд дараахь оруулгыг хэв маягийн тодорхойлолтын хэсэгт байрлуулна уу: img {height: 50%;} Хэрэв та зөвхөн нэг зургийн хэмжээг багасгах шаардлагатай бол нэмэлт id шинж чанарыг нэмнэ үү. үүнийг хуудасны утга дээр байрлуулж, энэ хуудасны үнэ цэнэтэй зургуудын нэгийг нь оноож өгнө үү. Жишээлбэл, PicOne: Загварын бичлэг дээр ижил утгыг нэмээд шошгоны нэрээс "хэш" -ээр тусгаарлана. Энэ тохиолдолд хэв маягийг бүрэн тайлбарлах нь дараах байдалтай байна: img # OnePic {өндөр: 50%;}
