آرٹیکل ڈائرکٹری
موبائل انٹرنیٹ کی تیزی سے ترقی اور WeChat مارکیٹنگ کے وسیع پیمانے پر استعمال کے ساتھ، موبائل فون زندگی کا ایک لازمی ذریعہ بن گیا ہے ۔
ویب سائٹ ٹیمپلیٹس کے لیے، ہم ورڈپریس کے جوابی تھیمز استعمال کرنے کی تجویز کرتے ہیں:
- اگر ورڈپریس تھیم ڈویلپر نے ورڈپریس تھیم پیج کو ڈیزائن کرتے وقت ایچ ٹی ایم ایل 5 امیج کو ایڈپٹیو اسکرین کو اچھی طرح سے نہیں بنایا...
- موبائل ڈیوائس پر ویب سائٹ کو براؤز کرتے ہوئے، ایک بہت ہی بدصورت تصویر کی نقل مکانی ہوگی، اور صارف کا تجربہ انتہائی ناقص ہے!
سی ایس ایس امیج ایڈاپٹیو کا کیا مطلب ہے؟
سی ایس ایس امیج سیلف ایڈاپٹیشن کا مطلب سی ایس ایس کوڈ کے ذریعے ایچ ٹی ایم ایل ویب پیج میں تصاویر بنانا ہے۔
- خودکار طور پر مختلف آلات کی چوڑائی اور اونچائی کے مطابق ڈھال لیں۔
- img ٹیگ کو خود بخود متناسب طور پر چھوٹا کیا جاتا ہے۔
اس کے بعد، چن ویلیانگ آپ کے ساتھ تصویر کے سائز کو متناسب طور پر بڑھانے کے لیے CSS کوڈ کا اشتراک کرے گا۔ ^_^
CSS تصویر کی اونچائی اور چوڑائی انکولی کوڈ
html میں تصویر داخل کریں:
اگر آپ چاہتے ہیں کہ تصویر چوڑائی اور اونچائی میں متعین رہنے کے بجائے اسکرین کے چھوٹے سائز کے مطابق ہو۔
آپ اپنے ورڈپریس تھیم ▼ کی style.css فائل میں درج ذیل کوڈ شامل کر سکتے ہیں۔
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }یہاں بیانmax-widthزیادہ سے زیادہ چوڑائی کا اصول
- اس بات کو یقینی بنانے کے لیے کہ تمام تصاویر زیادہ سے زیادہ 100% پر ظاہر ہوں (یعنی وہ صرف ان کی اپنی تصاویر کی طرح بڑی دکھائی جا سکتی ہیں)۔
- اس مقام پر، اگر تصویر پر مشتمل عنصر (مثال کے طور پر، تصویر پر مشتمل باڈی یا div) تصویر کی موروثی چوڑائی سے چھوٹا ہے، تو تصویر کو زیادہ سے زیادہ دستیاب جگہ کو بھرنے کے لیے چھوٹا کیا جائے گا۔
width:auto;خودکار چوڑائی کا مطلب ہے
\9 یہ ہیک سی ایس ایس لکھنے کا ایک طریقہ ہے۔
- اس طرح، "\9" کو عام سی ایس ایس کوڈ میں شامل کیا جاتا ہے، صرف IE براؤزر اسے پہچان سکتا ہے، دوسرے براؤزر اس بیان کو نظر انداز کر دیں گے۔
- یہ براؤزر کی تفریق کو حاصل کرے گا، ہم آہنگ براؤزرز کے مقصد کو فعال کرے گا۔
چوڑائی کا استعمال کیوں نہیں کرتے: 100%؟
تصاویر کی خودکار پیمانے کو حاصل کرنے کے لیے، آپ عام طور پر استعمال ہونے والی چوڑائی کی خصوصیات کو بھی استعمال کر سکتے ہیں، جیسےwidth：100％ہے.
تاہم، یہ اصول یہاں لاگو نہیں ہوتا ہے۔
- کیونکہ یہ اصول اسے اپنے کنٹینر کی طرح چوڑا دکھائے گا۔
- ایسی صورتوں میں جہاں کنٹینر تصویر سے کہیں زیادہ چوڑا ہو، تصویر کو غیر ضروری طور پر کھینچا جائے گا۔
注意 事项
سی ایس ایس سلیکٹرز کیا ہیں؟ کلاس اور آئی ڈی میں کیا فرق ہے؟مندرجہ ذیل سبق ▼ کے بارے میں بات کرتے ہیں۔
موبائل ویب سائٹ ایم پی 4 ویڈیو کو صفحہ کے مطابق کیسے چلاتی ہے؟براہ کرم نیچے دیئے گئے لنک پر کلک کریں ▼
امید ہے، "ویب پیجز میں اسکرین کے سائز اور متناسب سائز کے مطابق ڈھالنے کے لیے ایچ ٹی ایم ایل 5 امیج ریسائزنگ کوڈ" چن ویلیانگ کے بلاگ ( https://www.chenweiliang.com/ ) پر شیئر کیا گیا مضمون آپ کے لیے مددگار ثابت ہوگا۔
اس مضمون کا لنک بلا جھجھک شیئر کریں: https://www.chenweiliang.com/cwl-964.html