HTML 5 இமேஜ் அடாப்டிவ் ஸ்கிரீன் img விகிதாசார அளவீட்டுக் குறியீடு வலைப்பக்கத்திற்கான HTML XNUMX

வளர்ந்து வரும் மொபைல் இன்டர்நெட் காரணமாக,WeChat சந்தைப்படுத்தல்மொபைல் போன்களின் பிரபலம் ஆகிவிட்டதுஆயுள்இருக்க வேண்டிய கருவி.

ஆடெம்ப்ளேட், அதை பயன்படுத்த பரிந்துரைக்கப்படுகிறதுவேர்ட்பிரஸ்தகவமைப்பு தீம்:

CSS பட தழுவல் என்றால் என்ன?

CSS பட சுய-தழுவல் என்பது CSS குறியீடு மூலம் html வலைப்பக்கத்தில் படங்களை உருவாக்குவதைக் குறிக்கிறது:

அடுத்தது,சென் வெலியாங்நான் உங்களுடன் 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 தேர்வாளர்கள் என்றால் என்ன? வகுப்புக்கும் ஐடிக்கும் என்ன வித்தியாசம்?பின்வரும் பயிற்சிகள் ▼ பற்றி பேசுகின்றன

CSS தேர்வுக்குழு வகுப்பிற்கும் ஐடிக்கும் என்ன வித்தியாசம்? HTML இல் ஐடி மற்றும் வகுப்பு பயன்பாடு

CSS தேர்வுக்குழு வகுப்பிற்கும் ஐடிக்கும் என்ன வித்தியாசம்? HTML சென் வெலியாங்கில் ஐடி மற்றும் வகுப்பின் பயன்பாடு தற்போது எஸ்சிஓ மற்றும் இணையதளத்தின் வேர்ட்பிரஸ் கருப்பொருளை மேம்படுத்துகிறது.நான் இதற்கு முன்பு சில அடிப்படை HTML மற்றும் CSS அறிவைக் கற்றுக்கொண்டேன், ஆனால் நான் அதை சிறிது நேரம் இயக்கவில்லை, குறிப்பாக CSS பகுதியை...

மொபைல் இணையதளமானது எம்பி4 வீடியோவை பக்கத்திற்கு ஏற்ப எவ்வாறு இயக்குகிறது?கீழே உள்ள இணைப்பை கிளிக் செய்யவும் ▼

H5 வலைப்பக்கம் MP4 பக்கத்திற்கு எவ்வாறு மாற்றியமைக்கிறது? மொபைல் இணையதளம் வீடியோ html குறியீட்டை இயக்குகிறது

வீடியோ மார்க்கெட்டிங் என்பது ஆன்லைன் மார்க்கெட்டிங் ஒரு ஒருங்கிணைந்த பகுதியாகும்: பல ஆன்லைன் விளம்பர பயிற்சியாளர்கள், டிராஃபிக்கை இயக்க "வைரல் மார்க்கெட்டிங்" உடன் இணைந்து வீடியோவைப் பயன்படுத்துகின்றனர்.WeChat மார்க்கெட்டிங் வீடியோ மார்க்கெட்டிங்குடன் இணைந்தால், அது புதிய மீடியா மற்றும் சமூக இ-காமர்ஸின் நகல் எழுதும் மாற்று விகிதத்தை மேலும் மேம்படுத்தலாம்.எனக்கு நிறைய நணபர்கள் உள்ளனர்...