Jinsi Ya Kupunguza Picha Kwenye Html

Orodha ya maudhui:

Jinsi Ya Kupunguza Picha Kwenye Html
Jinsi Ya Kupunguza Picha Kwenye Html

Video: Jinsi Ya Kupunguza Picha Kwenye Html

Video: Jinsi Ya Kupunguza Picha Kwenye Html
Video: Jifunze Jinsi Ya Kuondoa Background Ya Nyuma Ya picha kwa Simu || How To Change Photo Background 2024, Novemba
Anonim

Katika lugha ya markup ya maandishi (HTML), amri maalum "tag" hutumiwa kuonyesha picha kwenye ukurasa. Lebo hii inajulikana kama img na ina seti ya anuwai - "sifa". Kwa msaada wa sifa, unaweza kuamua mambo yote ya onyesho la picha kwenye ukurasa wa maandishi, pamoja na vipimo vyake. Walakini, hii sio njia pekee ya kutatua shida - unaweza pia kupunguza saizi ya picha ukitumia Karatasi za Sinema za Kuachia (CSS).

Jinsi ya kupunguza picha kwenye html
Jinsi ya kupunguza picha kwenye html

Maagizo

Hatua ya 1

Weka sifa za urefu na upana kwenye lebo inayohusika na kuonyesha picha unayotaka. Weka ya kwanza kwa saizi ya wima ya picha, na ya pili kwa usawa. Weka nambari zote mbili kwa saizi, lakini hakuna haja ya kuonyesha vitengo - px - hapa. Wakati wa kuhesabu maadili muhimu kwa sifa hizi, zingatia utunzaji wa idadi ya kupunguzwa kwa picha, vinginevyo itaonyeshwa kwa fomu iliyopotoka. Kwa mfano, kuweka kwenye ukurasa picha ya nusu kutoka kwa faili iitwayo SomePic.jpg, vipimo vyake vya kwanza ni saizi 500 kwa 300, lebo inaweza kufanywa na amri ifuatayo:

Hatua ya 2

Unaweza kuweka upunguzaji sawia wa vipimo vya picha asili kwa asilimia. Ili kufanya hivyo, tumia tu sifa ya urefu bila kutaja upana, na ongeza alama ya asilimia baada ya kutaja saizi inayofafanua nambari. Kwa mfano, unaweza kufikia athari sawa na katika mfano kutoka kwa hatua ya awali na lebo iliyoandikwa katika fomu hii:

Hatua ya 3

Ikiwa unataka kutaja saizi ya picha kwa kutumia maelezo ya mitindo, tumia jina la lebo sawa - img - na sifa - upana na urefu. Katika kesi hii, vitengo vya kipimo - px, pt au% - lazima viainishwe kila wakati. Kuweka nusu ya ukubwa wa picha zote kwenye ukurasa, weka kiingilio kifuatacho kwenye kizuizi cha maelezo ya mtindo: img {urefu: 50%;} Ikiwa unahitaji kupunguza saizi ya picha moja tu, ongeza sifa ya kitambulisho cha ziada kwa lebo yake na uipe kipekee kwa picha za thamani ya ukurasa huu - kwa mfano, PicOne: Ongeza thamani sawa na rekodi ya mtindo, ukitenganisha na "hash" # kutoka kwa jina la lebo. Maelezo kamili ya mtindo katika kesi hii yanaweza kuonekana kama hii: img # OnePic {urefu: 50%;}

Ilipendekeza: