নিবন্ধ ডিরেক্টরি
মোবাইল ইন্টারনেটের দ্রুত বিকাশ এবং উইচ্যাট মার্কেটিংয়ের ব্যাপক ব্যবহারের ফলে মোবাইল ফোন জীবনের একটি অপরিহার্য উপকরণে পরিণত হয়েছে ।
ওয়েবসাইট টেমপ্লেটের জন্য আমরা ওয়ার্ডপ্রেস রেসপন্সিভ থিম ব্যবহারের পরামর্শ দিই:
- ওয়ার্ডপ্রেস থিম পৃষ্ঠা ডিজাইন করার সময় যদি ওয়ার্ডপ্রেস থিম ডেভেলপার এইচটিএমএল 5 ইমেজ অ্যাডাপ্টিভ স্ক্রিনটি ভালোভাবে তৈরি না করে...
- একটি মোবাইল ডিভাইসে ওয়েবসাইট ব্রাউজ করার সময়, একটি খুব কুশ্রী ছবি মিসলাইনমেন্ট হবে, এবং ব্যবহারকারীর অভিজ্ঞতা অত্যন্ত খারাপ!
CSS চিত্র অভিযোজিত মানে কি?
সিএসএস ইমেজ অ্যাডাপ্টিভ মানে হল সিএসএস কোডের মাধ্যমে এইচটিএমএল ওয়েব পেজে ইমেজ তৈরি করা:
- স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসের প্রস্থ এবং উচ্চতার সাথে মানিয়ে নিন।
- img ট্যাগ স্বয়ংক্রিয়ভাবে আনুপাতিকভাবে স্কেল করা হয়।
এরপর, চেন ওয়েইলিয়াং আপনাদের সাথে একটি ছবির আকার আনুপাতিকভাবে পরিবর্তন করার CSS কোড শেয়ার করবেন। ^_^
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 Image Resizing Code for Adapting to Screen Size and Proportional Size in Web Pages" শীর্ষক প্রবন্ধটি আপনার জন্য সহায়ক হবে।
এই নিবন্ধটির লিঙ্কটি নির্দ্বিধায় শেয়ার করুন: https://www.chenweiliang.com/cwl-964.html