مقالې لارښود
د موبایل انټرنیټ د ګړندۍ پراختیا او د WeChat بازار موندنې پراخه کارونې سره، موبایل تلیفونونه په ژوند کې یو اړین وسیله ګرځیدلې ده .
د ویب پاڼې ټیمپلیټونو لپاره ، موږ د ورڈپریس ځواب ورکوونکي موضوعاتو کارولو وړاندیز کوو :
- که چیرې د ورڈپریس تھیم جوړونکي د HTML 5 عکس انډول سکرین ښه نه کړي کله چې د ورڈپریس تھیم پا pageې ډیزاین کوي ...
- کله چې په ګرځنده وسیله کې ویب پاڼه وپلټئ، نو یو ډیر بد انځور به غلط وي، او د کاروونکي تجربه خورا خرابه وي!
د CSS عکس انډول څه معنی لري؟
د سی ایس ایس عکس تطابق معنی د CSS کوډ له لارې په html ویب پا pageه کې د عکسونو رامینځته کولو لپاره:
- په اتوماتيک ډول د مختلف وسیلو عرض او لوړوالی سره تطابق.
- د img ټګ په اتوماتيک ډول په تناسب اندازه کیږي.
بیا، چن ویلیانګ به تاسو سره د عکس د اندازې متناسب اندازه کولو لپاره د CSS کوډ شریک کړي. ^_^
د سی ایس ایس عکس لوړوالی او پلنوالی تطابق کوډ
په html کې انځور داخل کړئ:
که تاسو غواړئ چې عکس په عرض او لوړوالي کې د ثابت پاتې کیدو پرځای د سکرین کوچنۍ اندازې سره تطابق وکړئ.
تاسو کولی شئ لاندې کوډ د خپل WordPress موضوع 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％.
په هرصورت، دا قاعده دلته نه پلي کیږي.
- ځکه چې دا قاعده به دا د کانټینر په څیر پراخه ښکاره کړي.
- په هغه حالتونو کې چې کانټینر د عکس په پرتله خورا پراخه وي، عکس به په غیر ضروري توګه وغځول شي.
احتیاطونه
د CSS انتخاب کونکي څه دي؟ د ټولګي او ID ترمنځ توپیر څه دی؟لاندې درسونه د ▼ په اړه خبرې کوي
په موبایل ویب پاڼه کې د MP4 ویډیو پلی کولو لپاره پاڼه څنګه تطبیق کړئ؟مهرباني وکړئ لاندې لینک کلیک کړئ ▼
هیله ده، د چن وییلینګ په بلاګ ( https://www.chenweiliang.com/ ) کې شریک شوی مقاله "د ویب پاڼو کې د سکرین اندازې او متناسب اندازې سره د تطابق لپاره د HTML 5 انځور د اندازې کوډ" به ستاسو لپاره ګټوره وي.
د دې مقالې لینک شریکولو لپاره وړیا احساس وکړئ: https://www.chenweiliang.com/cwl-964.html