கட்டுரை அடைவு
வளர்ந்து வரும் மொபைல் இன்டர்நெட் காரணமாக,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 இது ஹேக் சிஎஸ்எஸ் எழுதும் ஒரு வழி.
- இந்த வழியில், "\9" சாதாரண css குறியீட்டில் சேர்க்கப்பட்டது, IE உலாவி மட்டுமே அதை அடையாளம் காண முடியும், மற்ற உலாவிகள் இந்த அறிக்கையை புறக்கணிக்கும்.
- இது உலாவி வேறுபாட்டை அடையும், இணக்கமான உலாவிகளின் நோக்கத்தை செயல்படுத்துகிறது.
அகலத்தை ஏன் பயன்படுத்தக்கூடாது: 100%?
படங்களின் தானியங்கி அளவை அடைய, நீங்கள் பொதுவாகப் பயன்படுத்தப்படும் அகல பண்புகளையும் பயன்படுத்தலாம், எ.கா.width：100％.
இருப்பினும், இந்த விதி இங்கு பொருந்தாது.
- ஏனெனில் இந்த விதி அதன் கொள்கலனைப் போல அகலமாகத் தோன்றும்.
- படத்தை விட கொள்கலன் மிகவும் அகலமாக இருக்கும் சந்தர்ப்பங்களில், படம் தேவையில்லாமல் நீட்டிக்கப்படும்.
முன்னெச்சரிக்கைகள்
CSS தேர்வாளர்கள் என்றால் என்ன? வகுப்புக்கும் ஐடிக்கும் என்ன வித்தியாசம்?பின்வரும் பயிற்சிகள் ▼ பற்றி பேசுகின்றன
மொபைல் இணையதளமானது எம்பி4 வீடியோவை பக்கத்திற்கு ஏற்ப எவ்வாறு இயக்குகிறது?கீழே உள்ள இணைப்பை கிளிக் செய்யவும் ▼
ஹோப் சென் வெலியாங் வலைப்பதிவு ( https://www.chenweiliang.com/ ) "இணையப் பக்கம் HTML 5 படத் தழுவல் திரை img விகிதாசார அளவிடுதல் குறியீடு" பகிர்ந்துள்ளது, இது உங்களுக்கு உதவியாக இருக்கும்.
இந்தக் கட்டுரையின் இணைப்பைப் பகிர வரவேற்கிறோம்:https://www.chenweiliang.com/cwl-964.html