HTML 5 ምስል የሚለምደዉ ስክሪን img ተመጣጣኝ የመለኪያ ኮድ ለድረ-ገጽ HTML XNUMX

የሞባይል ኢንተርኔት እያደገ በመምጣቱ እና የWeChat ግብይት በስፋት ጥቅም ላይ በመዋሉ፣ ሞባይል ስልኮች በህይወት ውስጥ ወሳኝ መሳሪያ ሆነዋል ።

ለድር ጣቢያ አብነቶች፣ የዎርድፕረስ ምላሽ ሰጪ ገጽታዎችን እንዲጠቀሙ እንመክራለን ፦

የሲኤስኤስ ምስል አስማሚ ማለት ምን ማለት ነው?

የሲኤስኤስ ምስል አስማሚ ማለት በኤችቲኤምኤል ድረ-ገጽ ላይ ያሉትን ምስሎች በCSS ኮድ መስራት ማለት ነው።

ቀጥሎ፣ ቼን ዌይሊያንግ የምስልን መጠን በተመጣጣኝ መጠን ለማስላት የሲኤስኤስ ኮድ ያካፍላችኋል። ^_^

የሲኤስኤስ ምስል ቁመት እና ስፋት አስማሚ ኮድ

ምስል በኤችቲኤምኤል አስገባ፡

ምስሉ በስፋት እና በከፍታ ላይ ተስተካክሎ ከመቆየት ይልቅ ከማያ ገጹ ትንሽ መጠን ጋር እንዲስማማ ከፈለጉ.

የሚከተለውን ኮድ ወደ የዎርድፕረስ ጭብጥ ▼ style.css ፋይል ማከል ይችላሉ።

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

መግለጫ እዚህmax-widthከፍተኛው ስፋት ደንብ

• ሁሉም ምስሎች ቢበዛ 100% እንዲታዩ (ማለትም እንደ ራሳቸው ምስሎች ብቻ ሊታዩ ይችላሉ)።
• በዚህ ጊዜ ምስሉን የያዘው አካል (ለምሳሌ ምስሉን የያዘው አካል ወይም ዳይቭ) ከምስሉ ውስጣዊ ስፋት ያነሰ ከሆነ ምስሉ ከፍተኛውን ቦታ ለመሙላት ሚዛን ይደረጋል።

width:auto;አውቶማቲክ ስፋት ማለት ነው።

\9 ሀክ css የመጻፍ መንገድ ነው።

• በዚህ መንገድ "\9" ወደ የተለመደው የሲኤስኤስ ኮድ ተጨምሯል, IE አሳሽ ብቻ ነው ሊያውቀው የሚችለው, ሌሎች አሳሾች ይህንን መግለጫ ችላ ይላሉ.
• ይህ የአሳሽ ልዩነትን ያመጣል, ተኳሃኝ የሆኑ አሳሾችን አላማ ያስችለዋል.

ለምን ስፋት አትጠቀምም: 100%?

የምስሎችን አውቶማቲክ ልኬት ለማግኘት፣ በብዛት ጥቅም ላይ የዋሉትን የወርድ ንብረቶችን መጠቀምም ይችላሉ፣ ለምሳሌ።width：100％.

ሆኖም, ይህ ህግ እዚህ አይተገበርም.

• ምክንያቱም ይህ ደንብ እንደ መያዣው ሰፊ ሆኖ እንዲታይ ያደርገዋል.
• መያዣው ከምስሉ በጣም ሰፊ በሆነበት ሁኔታ ምስሉ ሳያስፈልግ ይለጠጣል.

ጥንቃቄዎች

የሲኤስኤስ መምረጫዎች ምንድን ናቸው? ክፍል እና መታወቂያ መካከል ያለው ልዩነት ምንድን ነው?የሚከተሉት ትምህርቶች ስለ ▼ ይናገራሉ

🔗በ CSS መራጭ ክፍል እና መታወቂያ መካከል ያለው ልዩነት ምንድን ነው? በኤችቲኤምኤል ውስጥ የመታወቂያ እና የክፍል አጠቃቀም

የሞባይል ድረ-ገጽ እንዴት ለገጹ ተስማሚ የሆነ MP4 ቪዲዮን ያጫውታል?እባክዎ ከታች ያለውን ሊንክ ይጫኑ ▼

🔗የH5 ድረ-ገጽ MP4ን ከገጹ ጋር እንዴት ማላመድ ይቻላል?