নিবন্ধ ডিরেক্টরি
ক্রমবর্ধমান মোবাইল ইন্টারনেটের কারণে,Wechat বিপণনমোবাইল ফোনের জনপ্রিয়তা বেড়েছেজীবনটুল থাকতে হবে।
একটি ওয়েবসাইট তৈরি করুনটেমপ্লেট, এটি ব্যবহার করার সুপারিশ করা হয়ওয়ার্ডপ্রেসএর জন্য অভিযোজিত থিম:
- ওয়ার্ডপ্রেস থিম পৃষ্ঠা ডিজাইন করার সময় যদি ওয়ার্ডপ্রেস থিম ডেভেলপার এইচটিএমএল 5 ইমেজ অ্যাডাপ্টিভ স্ক্রিনটি ভালোভাবে তৈরি না করে...
- একটি মোবাইল ডিভাইসে ওয়েবসাইট ব্রাউজ করার সময়, একটি খুব কুশ্রী ছবি মিসলাইনমেন্ট হবে, এবং ব্যবহারকারীর অভিজ্ঞতা অত্যন্ত খারাপ!
CSS চিত্র অভিযোজিত মানে কি?
সিএসএস ইমেজ অ্যাডাপ্টিভ মানে হল সিএসএস কোডের মাধ্যমে এইচটিএমএল ওয়েব পেজে ইমেজ তৈরি করা:
- স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসের প্রস্থ এবং উচ্চতার সাথে মানিয়ে নিন।
- img ট্যাগ স্বয়ংক্রিয়ভাবে আনুপাতিকভাবে স্কেল করা হয়।
পরবর্তী,চেন উইলিয়াংআমি আপনার সাথে CSS img সমানুপাতিক স্কেলিং কোড শেয়ার করব ^_^
CSS ছবির উচ্চতা এবং প্রস্থ অভিযোজিত কোড
html এ ছবি সন্নিবেশ করান:
আপনি যদি চান যে চিত্রটি প্রস্থ এবং উচ্চতায় স্থির থাকার পরিবর্তে স্ক্রিনের ছোট আকারের সাথে খাপ খাইয়ে নিতে পারে।
আপনি আপনার ওয়ার্ডপ্রেস থিমের style.css ফাইলে নিম্নলিখিত কোড যোগ করতে পারেন ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }বিবৃতি এখানেmax-widthসর্বাধিক প্রস্থ নিয়ম
- নিশ্চিত করতে যে সমস্ত ছবি সর্বাধিক 100% এ প্রদর্শিত হয় (অর্থাৎ সেগুলি কেবল তাদের নিজস্ব চিত্রের মতো বড় প্রদর্শিত হতে পারে)।
- এই মুহুর্তে, যদি ইমেজের উপাদানটি (উদাহরণস্বরূপ, বডি বা ডিভটি ইমেজ ধারণকারী) ছবির অন্তর্নিহিত প্রস্থের চেয়ে ছোট হয়, তাহলে সর্বাধিক উপলব্ধ স্থান পূরণ করার জন্য চিত্রটিকে স্কেল করা হবে।
width:auto;স্বয়ংক্রিয় প্রস্থ মানে
\9 এটি হ্যাক সিএসএস লেখার একটি উপায়।
- এইভাবে, সাধারণ সিএসএস কোডে "\9" যোগ করা হয়, শুধুমাত্র IE ব্রাউজার এটি চিনতে পারে, অন্যান্য ব্রাউজার এই বিবৃতিটি উপেক্ষা করবে।
- এটি সামঞ্জস্যপূর্ণ ব্রাউজারগুলির উদ্দেশ্য সক্ষম করে ব্রাউজার পার্থক্য অর্জন করবে।
কেন প্রস্থ ব্যবহার করবেন না: 100%?
চিত্রগুলির স্বয়ংক্রিয় স্কেলিং অর্জন করতে, আপনি আরও সাধারণভাবে ব্যবহৃত প্রস্থ বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন, যেমনwidth：100％.
তবে এই নিয়ম এখানে প্রযোজ্য নয়।
- কারণ এই নিয়ম এটিকে তার পাত্রের মতো চওড়া করে দেখাবে।
- এমন ক্ষেত্রে যেখানে ধারকটি ছবির চেয়ে অনেক বেশি প্রশস্ত, চিত্রটি অপ্রয়োজনীয়ভাবে প্রসারিত হবে।
নিরাপত্তা
CSS নির্বাচক কি? ক্লাস এবং আইডি মধ্যে পার্থক্য কি?নিম্নলিখিত টিউটোরিয়াল ▼ সম্পর্কে কথা বলে
মোবাইল ওয়েবসাইট কিভাবে পৃষ্ঠার সাথে অভিযোজিত MP4 ভিডিও চালায়?নিচের লিঙ্কে ক্লিক করুন ▼
হোপ চেন উইলিয়াং ব্লগ ( https://www.chenweiliang.com/ ) "ওয়েব পেজ HTML 5 ইমেজ অ্যাডাপ্টিভ স্ক্রীন img আনুপাতিক স্কেলিং কোড" শেয়ার করেছে, যা আপনার জন্য সহায়ক।
এই নিবন্ধটির লিঙ্ক শেয়ার করতে স্বাগতম:https://www.chenweiliang.com/cwl-964.html
সর্বশেষ আপডেট পেতে চেন ওয়েইলিয়াং এর ব্লগের টেলিগ্রাম চ্যানেলে স্বাগতম!
📚 এই গাইডটিতে বিশাল মূল্য রয়েছে, 🌟এটি একটি বিরল সুযোগ, এটি মিস করবেন না! ⏰⌛💨
ভালো লাগলে শেয়ার এবং লাইক করুন!
আপনার শেয়ার এবং লাইক আমাদের ক্রমাগত অনুপ্রেরণা!