CSS আচরণে পরিবর্তনের একটি উন্নত সতর্কতা যা অবাঞ্ছিত ওভারফ্লো হতে পারে।
Chrome 108 থেকে, নিম্নলিখিত প্রতিস্থাপিত উপাদানগুলি ওভারফ্লো বৈশিষ্ট্যকে সম্মান করে: img , video এবং canvas ৷ Chrome-এর পূর্ববর্তী সংস্করণগুলিতে, এই উপাদানগুলিতে এই বৈশিষ্ট্যটিকে উপেক্ষা করা হয়েছিল৷
এর মানে হল যে একটি চিত্র যা আগে এর বিষয়বস্তু বাক্সে ক্লিপ করা হয়েছিল এখন সেই সীমার বাইরে আঁকতে পারে যদি এটি একটি স্টাইল শীটে করার জন্য নির্দিষ্ট করা হয়। ডিফল্ট ব্রাউজার শৈলী শীট নিম্নলিখিত নিয়মগুলির সাথে বিষয়বস্তু বাক্সে ওভারফ্লো ক্লিপ করে:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
যাইহোক, আপনার স্টাইলশীটের পক্ষে overflow: visible সেট করে এই আচরণটি ওভাররাইড করা সম্ভব। নিম্নলিখিত উদাহরণগুলি এমন কিছু ক্ষেত্রে দেখায় যেখানে আপনি এখন অবাঞ্ছিত ওভারফ্লো দেখতে পারেন।
object-fit বৈশিষ্ট্যটি চিত্রটি স্কেল করতে এবং বাক্সটি পূরণ করতে ব্যবহৃত হয়। যদি আকৃতির অনুপাত বাক্সের সাথে মেলে না, তবে চিত্রটি সীমার বাইরে আঁকবে।
img {
object-fit: cover;
overflow: visible;
}
border-radius বৈশিষ্ট্য একটি বর্গাকার চিত্রকে একটি বৃত্তের মতো দেখায়, কিন্তু overflow দৃশ্যমান হওয়ায় ক্লিপিং আর ঘটবে না।
img {
border-radius: 50% 50%;
overflow: visible;
}
inherit: all এবং overflow সহ সমস্ত বৈশিষ্ট্য উত্তরাধিকার সূত্রে প্রাপ্ত করা।
img {
all: inherit;
}
সমাধান
এই পরিবর্তনের অর্থ যদি আপনি অবাঞ্ছিত ওভারফ্লো দেখতে পান এবং ওভারফ্লো প্রপার্টিটিকে দৃশ্যমান হিসাবে ওভাররাইড করা ইচ্ছাকৃত না হয়, তাহলে DevTools-এর মাধ্যমে উপাদানটিতে প্রয়োগ করা CSS পরিদর্শন করুন। এটি আপনাকে সিএসএস ঘোষণাকে সনাক্ত করার অনুমতি দেবে যা visible ওভারফ্লো সম্পত্তিকে ওভাররাইড করছে এবং এটিকে সরিয়ে ফেলবে বা clip আপডেট করবে।
img {
overflow: clip;
}
যদি CSS আপডেট করা তুচ্ছ না হয়, তবে আরেকটি সমাধান হল উপাদানটিতে নিম্নলিখিত ইনলাইন শৈলী যোগ করা।
<img style="overflow:clip !important">