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