ලිපි නාමාවලිය
වේගයෙන් වර්ධනය වන ජංගම අන්තර්ජාලය හේතුවෙන්,Wechat අලෙවිකරණයජංගම දුරකථන ජනප්රියත්වය බවට පත් වී ඇතජීවිතයතිබිය යුතු මෙවලම.
වෙබ් අඩවියක් සාදන්නඅච්චුව, එය භාවිතා කිරීම රෙකමදාරු කරනු ලැබේවර්ඩ්ප්රෙස්අනුවර්තිත තේමාව:
- වර්ඩ්ප්‍රෙස් තේමා පිටුව සැලසුම් කිරීමේදී වර්ඩ්ප්‍රෙස් තේමා සංවර්ධකයා HTML 5 රූප අනුවර්තන තිරය හොඳින් සාදා නොගත්තේ නම්...
- ජංගම උපාංගයක් මත වෙබ් අඩවිය පිරික්සීමේදී, ඉතා අවලස්සන පින්තූරයක් නොගැලපෙන අතර, පරිශීලක අත්දැකීම අතිශයින් දුර්වලයි!
CSS අනුවර්තනය යන්නෙන් අදහස් කරන්නේ කුමක්ද?
CSS රූප අනුවර්තනය යන්නෙන් අදහස් කරන්නේ, CSS කේතය හරහා html වෙබ් පිටුවේ පින්තූර සෑදීමයි:
- විවිධ උපාංගවල පළල සහ උසට ස්වයංක්‍රීයව අනුගත වේ.
- img ටැගය ස්වයංක්‍රීයව සමානුපාතිකව පරිමාණය කෙරේ.
ඊලඟ,චෙන් වේලියාංමම ඔබ සමඟ CSS img සමානුපාතික පරිමාණ කේතය ^_^ බෙදා ගන්නෙමි
CSS රූපයේ උස සහ පළල අනුවර්තන කේතය
html හි රූපය ඇතුළු කරන්න:
ඔබට අවශ්‍ය නම් රූපය පළලින් සහ උසින් ස්ථාවරව සිටීම වෙනුවට තිරයේ කුඩා ප්‍රමාණයට අනුවර්තනය වීමට.
ඔබට පහත කේතය ඔබේ වර්ඩ්ප්‍රෙස් තේමාවේ style.css ගොනුවට එක් කළ හැක ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }ප්රකාශය මෙතනmax-widthඋපරිම පළල රීතිය
- සියලුම පින්තූර උපරිම 100% ප්‍රදර්ශනය වන බව සහතික කිරීම සඳහා (එනම් ඒවා ප්‍රදර්ශනය කළ හැක්කේ ඔවුන්ගේම පින්තූර තරම් විශාල ලෙස පමණි).
- මෙම අවස්ථාවෙහිදී, රූපය අඩංගු මූලද්‍රව්‍යය (උදාහරණයක් ලෙස, රූපය අඩංගු ශරීරය හෝ div) රූපයේ ආවේනික පළලට වඩා කුඩා නම්, පවතින උපරිම ඉඩ පිරවීමට රූපය පරිමාණය කරනු ලැබේ.
width:auto;ස්වයංක්‍රීය පළල යන්නයි
\9 එය hack css ලියන ආකාරයකි.
- මේ ආකාරයෙන්, "\9" සාමාන්ය css කේතයට එකතු වේ, IE බ්රවුසරයට පමණක් එය හඳුනාගත හැකිය, අනෙකුත් බ්රවුසරයන් මෙම ප්රකාශය නොසලකා හරිනු ඇත.
- ගැළපෙන බ්‍රවුසරවල අරමුණ සක්‍රීය කරමින් මෙය බ්‍රවුසරයේ අවකලනය ලබා ගනී.
පළල භාවිතා නොකරන්නේ ඇයි: 100%?
රූපවල ස්වයංක්‍රීය පරිමාණය සාක්ෂාත් කර ගැනීම සඳහා, ඔබට බහුලව භාවිතා වන පළල ගුණාංග ද භාවිතා කළ හැක, උදා.width：100％.
කෙසේ වෙතත්, මෙම රීතිය මෙහි අදාළ නොවේ.
- මන්ද මෙම රීතිය එහි බහාලුම් තරම් පුළුල් ලෙස පෙනෙනු ඇත.
- කන්ටේනරය රූපයට වඩා පුළුල් වන අවස්ථාවන්හිදී, රූපය අනවශ්ය ලෙස දිගු කරනු ඇත.
පූර්වාරක්ෂාව
CSS තේරීම් යනු කුමක්ද? පන්තිය සහ හැඳුනුම්පත අතර වෙනස කුමක්ද?පහත නිබන්ධන ▼ ගැන කතා කරයි
ජංගම වෙබ් අඩවිය MP4 වීඩියෝ පිටුවට අනුවර්තනය කරන්නේ කෙසේද?කරුණාකර පහත සබැඳිය ක්ලික් කරන්න ▼
Hope Chen Weiliang බ්ලොග් ( https://www.chenweiliang.com/ ) ඔබට ප්‍රයෝජනවත් වන "වෙබ් පිටුව HTML 5 රූප අනුවර්තන තිරය img සමානුපාතික පරිමාණ කේතය" බෙදාගෙන ඇත.
මෙම ලිපියේ සබැඳිය බෙදා ගැනීමට සාදරයෙන් පිළිගනිමු:https://www.chenweiliang.com/cwl-964.html
නවතම යාවත්කාලීන ලබා ගැනීමට Chen Weiliang ගේ බ්ලොගයේ Telegram නාලිකාව වෙත සාදරයෙන් පිළිගනිමු!
📚 මෙම මාර්ගෝපදේශයෙහි විශාල වටිනාකමක් ඇත, 🌟මෙය දුර්ලභ අවස්ථාවක්, එය අතපසු නොකරන්න! ⏰⌛💨
ඔබ කැමති නම් Share කර Like කරන්න!
ඔබගේ බෙදාගැනීම් සහ කැමැත්ත අපගේ අඛණ්ඩ අභිප්‍රේරණයයි!