ಲೇಖನ ಡೈರೆಕ್ಟರಿ
ಪ್ರವರ್ಧಮಾನಕ್ಕೆ ಬರುತ್ತಿರುವ ಮೊಬೈಲ್ ಇಂಟರ್ನೆಟ್ ಕಾರಣ,ವೆಚಾಟ್ ಮಾರ್ಕೆಟಿಂಗ್ಮೊಬೈಲ್ ಫೋನ್‌ಗಳ ಜನಪ್ರಿಯತೆ ಹೆಚ್ಚಾಗಿದೆಜೀವನಹೊಂದಿರಬೇಕಾದ ಸಾಧನ.
ವೆಬ್‌ಸೈಟ್ ನಿರ್ಮಿಸಿಟೆಂಪ್ಲೇಟ್, ಅದನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆವರ್ಡ್ಪ್ರೆಸ್ಇದಕ್ಕಾಗಿ ಅಡಾಪ್ಟಿವ್ ಥೀಮ್:
- WordPress ಥೀಮ್ ಪುಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ WordPress ಥೀಮ್ ಡೆವಲಪರ್ HTML 5 ಇಮೇಜ್ ಅಡಾಪ್ಟಿವ್ ಸ್ಕ್ರೀನ್ ಅನ್ನು ಉತ್ತಮವಾಗಿ ಮಾಡದಿದ್ದರೆ...
- ಮೊಬೈಲ್ ಸಾಧನದಲ್ಲಿ ವೆಬ್‌ಸೈಟ್ ಬ್ರೌಸ್ ಮಾಡುವಾಗ, ತುಂಬಾ ಅಸಹ್ಯವಾದ ಚಿತ್ರವು ತಪ್ಪಾಗಿ ಹೊಂದಿಸಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವು ಅತ್ಯಂತ ಕಳಪೆಯಾಗಿದೆ!
CSS ಇಮೇಜ್ ಅಡಾಪ್ಟಿವ್ ಎಂದರೆ ಏನು?
CSS ಇಮೇಜ್ ಅಡಾಪ್ಟಿವ್ ಎಂದರೆ html ವೆಬ್ ಪುಟದಲ್ಲಿ CSS ಕೋಡ್ ಮೂಲಕ ಚಿತ್ರಗಳನ್ನು ಮಾಡುವುದು:
- ವಿಭಿನ್ನ ಸಾಧನಗಳ ಅಗಲ ಮತ್ತು ಎತ್ತರಕ್ಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಿ.
- img ಟ್ಯಾಗ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಅಳೆಯಲಾಗುತ್ತದೆ.
ಮುಂದೆ,ಚೆನ್ ವೈಲಿಯಾಂಗ್ನಾನು ನಿಮ್ಮೊಂದಿಗೆ CSS img ಅನುಪಾತದ ಸ್ಕೇಲಿಂಗ್ ಕೋಡ್ ^_^ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತೇನೆ
CSS ಚಿತ್ರದ ಎತ್ತರ ಮತ್ತು ಅಗಲ ಹೊಂದಾಣಿಕೆಯ ಕೋಡ್
html ನಲ್ಲಿ ಚಿತ್ರವನ್ನು ಸೇರಿಸಿ:
ಚಿತ್ರವು ಅಗಲ ಮತ್ತು ಎತ್ತರದಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಉಳಿಯುವ ಬದಲು ಪರದೆಯ ಸಣ್ಣ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ನೀವು ಬಯಸಿದರೆ.
ನಿಮ್ಮ WordPress ಥೀಮ್ ▼ ನ style.css ಫೈಲ್‌ಗೆ ನೀವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಬಹುದು
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }ಇಲ್ಲಿ ಹೇಳಿಕೆmax-widthಗರಿಷ್ಠ ಅಗಲ ನಿಯಮ
- ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಗರಿಷ್ಠ 100% ರಷ್ಟು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು (ಅಂದರೆ ಅವುಗಳನ್ನು ತಮ್ಮ ಸ್ವಂತ ಚಿತ್ರಗಳಂತೆ ಮಾತ್ರ ದೊಡ್ಡದಾಗಿ ಪ್ರದರ್ಶಿಸಬಹುದು).
- ಈ ಹಂತದಲ್ಲಿ, ಚಿತ್ರವನ್ನು ಹೊಂದಿರುವ ಅಂಶವು (ಉದಾಹರಣೆಗೆ, ಚಿತ್ರವನ್ನು ಹೊಂದಿರುವ ದೇಹ ಅಥವಾ ಡಿವಿ) ಚಿತ್ರದ ಅಂತರ್ಗತ ಅಗಲಕ್ಕಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ, ಲಭ್ಯವಿರುವ ಗರಿಷ್ಠ ಜಾಗವನ್ನು ತುಂಬಲು ಚಿತ್ರವನ್ನು ಅಳೆಯಲಾಗುತ್ತದೆ.
width:auto;ಸ್ವಯಂಚಾಲಿತ ಅಗಲ ಎಂದರ್ಥ
\9 ಇದು ಹ್ಯಾಕ್ ಸಿಎಸ್ಎಸ್ ಬರೆಯುವ ಒಂದು ಮಾರ್ಗವಾಗಿದೆ.
- ಈ ರೀತಿಯಾಗಿ, "\9" ಅನ್ನು ಸಾಮಾನ್ಯ css ಕೋಡ್‌ಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ, ಕೇವಲ IE ಬ್ರೌಸರ್ ಅದನ್ನು ಗುರುತಿಸಬಹುದು, ಇತರ ಬ್ರೌಸರ್‌ಗಳು ಈ ಹೇಳಿಕೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತವೆ.
- ಇದು ಬ್ರೌಸರ್ ವಿಭಿನ್ನತೆಯನ್ನು ಸಾಧಿಸುತ್ತದೆ, ಹೊಂದಾಣಿಕೆಯ ಬ್ರೌಸರ್‌ಗಳ ಉದ್ದೇಶವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ಅಗಲವನ್ನು ಏಕೆ ಬಳಸಬಾರದು: 100%?
ಚಿತ್ರಗಳ ಸ್ವಯಂಚಾಲಿತ ಸ್ಕೇಲಿಂಗ್ ಸಾಧಿಸಲು, ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಅಗಲ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು, ಉದಾ.width：100％.
ಆದರೆ, ಈ ನಿಯಮ ಇಲ್ಲಿ ಅನ್ವಯಿಸುವುದಿಲ್ಲ.
- ಏಕೆಂದರೆ ಈ ನಿಯಮವು ಅದರ ಕಂಟೇನರ್‌ನಂತೆ ವಿಶಾಲವಾಗಿ ಕಾಣಿಸುತ್ತದೆ.
- ಧಾರಕವು ಚಿತ್ರಕ್ಕಿಂತ ಹೆಚ್ಚು ಅಗಲವಾಗಿರುವ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಚಿತ್ರವನ್ನು ಅನಗತ್ಯವಾಗಿ ವಿಸ್ತರಿಸಲಾಗುತ್ತದೆ.
ಮುನ್ನೆಚ್ಚರಿಕೆಗಳು
CSS ಸೆಲೆಕ್ಟರ್‌ಗಳು ಯಾವುವು? ವರ್ಗ ಮತ್ತು ಐಡಿ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?ಕೆಳಗಿನ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ▼ ಕುರಿತು ಮಾತನಾಡುತ್ತವೆ
ಮೊಬೈಲ್ ವೆಬ್‌ಸೈಟ್ ಹೇಗೆ MP4 ವೀಡಿಯೊವನ್ನು ಪುಟಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ?ದಯವಿಟ್ಟು ಕೆಳಗಿನ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ▼
ಹೋಪ್ ಚೆನ್ ವೈಲಿಯಾಂಗ್ ಬ್ಲಾಗ್ ( https://www.chenweiliang.com/ ) "ವೆಬ್ ಪೇಜ್ HTML 5 ಇಮೇಜ್ ಅಡಾಪ್ಟಿವ್ ಸ್ಕ್ರೀನ್ img ಅನುಪಾತದ ಸ್ಕೇಲಿಂಗ್ ಕೋಡ್" ಅನ್ನು ಹಂಚಿಕೊಂಡಿದೆ, ಇದು ನಿಮಗೆ ಸಹಾಯಕವಾಗಿದೆ.
ಈ ಲೇಖನದ ಲಿಂಕ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಸ್ವಾಗತ:https://www.chenweiliang.com/cwl-964.html
ಇತ್ತೀಚಿನ ನವೀಕರಣಗಳನ್ನು ಪಡೆಯಲು ಚೆನ್ ವೈಲಿಯಾಂಗ್ ಅವರ ಬ್ಲಾಗ್‌ನ ಟೆಲಿಗ್ರಾಮ್ ಚಾನಲ್‌ಗೆ ಸುಸ್ವಾಗತ!
📚 ಈ ಮಾರ್ಗದರ್ಶಿಯು ದೊಡ್ಡ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ, 🌟ಇದು ಅಪರೂಪದ ಅವಕಾಶವಾಗಿದೆ, ಇದನ್ನು ತಪ್ಪಿಸಿಕೊಳ್ಳಬೇಡಿ! ⏰⌛💨
ಇಷ್ಟವಾದಲ್ಲಿ ಶೇರ್ ಮಾಡಿ ಮತ್ತು ಲೈಕ್ ಮಾಡಿ!
ನಿಮ್ಮ ಹಂಚಿಕೆ ಮತ್ತು ಇಷ್ಟಗಳು ನಮ್ಮ ನಿರಂತರ ಪ್ರೇರಣೆ!