A HTML lehetővé teszi számunkra, hogy képeket használjunk weboldalakon, és különböző stílusok alkalmazásával vonzóbbá tegyük azokat. Ha módosítania kell a kép képarányát, vagy a kép nem illeszkedik a weboldal elrendezéséhez, átméretezheti. Erre a célra használhatja a „ szélesség ” és „ magasság ' tulajdonságok a ' img ” címke. Ezek a tulajdonságértékek egyszerűen beállíthatók CSS pixelekben.

Ebben a kézikönyvben megtudhatja, hogyan lehet átméretezni a képet HTML-ben.

Mielőtt elkezdené, hozzá kell adni a képet ahhoz a HTML-fájlhoz, amelyen a kép átméretezési műveletet végrehajtja.

Hogyan ágyazhatok be képet HTML-be?

Kép hozzáadásához HTML-ben használja a következő szintaxist:

A fent említett szintaxis leírását az alábbiakban ismertetjük. Az ' img ” címke két attribútumot használ:

• • 'src' a kép elérési útjának (URL) megadására szolgál.
  • 'minden' az alternatív szöveg megadására szolgál, ha a kép nem jelenik meg.

HTML

Az alábbi kód két div-t jelöl. Az első divben hozzáadtunk egy fejlécet a weboldalunk felső közepén: ' Képméret HTML-ben ” a

címkével:

< div >
< központ >
< h1 > Képméret ban ben HTML h1 >
központ >
div >

A második div a következővel egészül ki: „ tartály ” és a közepén lévő kép megjelenítésére a

címkét használtuk. A kép hozzáadásához írja be a központba az alábbi kódot:

< div osztály = 'tartály' >
< központ >
< img src = 'images/butterfly.jpg' minden = 'alternatív szöveg' >
központ >
div >

A kiválasztott kép a „ 640*437 ” képarány így fog kinézni:

A következő rész bemutatja a kép átméretezésének módszerét.

Hogyan lehet átméretezni a képet HTML-ben?

Testreszabhatja a kép méretét vagy átméretezheti a „ szélesség ” és „ magasság ” attribútumokat a szélességének és magasságának beállításához.

Most állítsuk be a hozzáadott kép szélességének értékét a következőképpen: 300 ', és nézze meg, hogyan működik:

< img src = 'images/butterfly.jpg' minden = 'alternatív szöveg' szélesség = '300' >

Látható, hogy a kép szélessége megváltozott, és az átméretezés sikeresen megtörtént:

A szélesség mellett a „ magasság ” attribútum is használható ugyanerre a célra. A méretkülönbség megtekintéséhez állítsa be a „ 550 ” pixel képmagasságként:

< img src = 'images/butterfly.jpg' minden = 'alternatív szöveg' szélesség = '300' magasság = '550' >

Jól megfigyelheti a képméret különbségét:

Így a szélesség és magasság attribútumokat használják a kép átméretezéséhez.

Következtetés

A HTML-ben a „ magasság ” és „ szélesség ” attribútumokat használnak a kép átméretezéséhez. Ezen attribútumok értékeinek beállításával módosíthatja a hozzáadott kép alapértelmezett képarányát. Ennek eredményeként egyértelmű különbség látható a képméret tekintetében. Ez a blog bemutatta a magasság és súly tulajdonságok használatának módszerét a képek HTML-ben történő átméretezésére.