আমি কীভাবে IE তে পটভূমি আকারের কাজ করব?

Question

আই এস সিএস স্টাইলকে background-sizeকাজ করার কোনও জ্ঞাত উপায় কি নেই ?

Comments

আপনি কি প্রভাব পেতে চেষ্টা করছেন?

— জিপ্পিভি

@ জিপভিভি আমার একটি ডিভি রয়েছে যা প্রায় 250 পিক্সেল প্রশস্ত। তবে পটভূমি চিত্রটি 300px প্রশস্ত। আমি ব্যাকগ্রাউন্ড চিত্রটি পুরোপুরি ফিট হতে চাই (পটভূমির আকার: 100%) যাতে এটি বন্ধ না হয়ে যায়। তারপরে :hoverআমি ব্যাকগ্রাউন্ডের আকারটি পুরো 300px প্রস্থে পরিবর্তন করতে চাই (ব্যাকগ্রাউন্ড-আকার: অটো) জুমিংয়ের বিভ্রম তৈরি করতে

— জেডি আইজ্যাকস

আপনি ইম্জি ট্যাগ ব্যবহার করে একই প্রভাব অর্জন করতে পারেন। এর উপরে যদি আপনার কিছু প্রয়োজন হয় তবে z-index ব্যবহার করুন।

— জিপ্পিভি

@ জন যদি গ্রহণযোগ্য উত্তর পরিবর্তন করতে বিবেচনা করেন তবে ড্যানের কাজটি যদি আপনার পক্ষে কাজ করে!

— পেক্কা

@ জিপ্পিভি আইএমজি ট্যাগের মাঝে মাঝে অপ্রয়োজনীয় পার্শ্ব-প্রতিক্রিয়া থাকে, উদাহরণস্বরূপ এটি নির্বাচন বা ডান ক্লিক করা যেতে পারে। এগুলি কখনও কখনও ঠিক থাকে, কখনও কখনও হয় না।

— পিটারহ - মনিকা

Answer 1

কিছুটা দেরি হলেও এটি কার্যকরও হতে পারে। IE 5.5+ এর জন্য একটি আইই ফিল্টার রয়েছে, যা আপনি প্রয়োগ করতে পারেন:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

তবে, এই বরাদ্দকৃত অঞ্চলে পুরো চিত্রটিকে স্কেল করে, সুতরাং আপনি যদি স্প্রিট ব্যবহার করেন তবে এটি সমস্যার কারণ হতে পারে।

সুনির্দিষ্টতা: আলফাইমজেলোডার ফিল্টার @ মাইক্রোসফ্ট

Comments

আমি অবাক হয়েছি কেন এমএস কেন কেবল CSS ব্যবহার করে সেই ফাংশনরালটি বাস্তবায়ন করেনি। অনেক ধন্যবাদ!

— মার্টিন অ্যান্ডারসন

কোন আইই সংস্করণগুলি এটি সমর্থন করে?

— ᆺ ᆼ

আমরা যদি সংজ্ঞায়িত উপাদানটির ভিতরে লিঙ্ক এবং বোতাম ব্যবহার করি তবে সেই লিঙ্কগুলি এবং বোতামগুলি কাজ করবে না। কেউ কি এটিকে ঠিক করার কোনও পদ্ধতি জানেন?

— রুবিপ্রিন্স

আমাকে position: relative; z-index: 999ইনপুট যোগ করতে হয়েছিল , এ জাতীয়

— ডিভের

স্কেল পদ্ধতিটি অনুপাতটি রাখে না যদিও .. সুতরাং আপনার উপাদানটি যেমন আপনার ইমেজের মতো অনুপাত থাকে তেমন ভাল।

— ইয়ভেস ভ্যান ব্রুকোভেন

Answer 2

আমি jquery.backgroundSize.js তৈরি করেছি : একটি 1.5K jquery প্লাগইন যা "কভার" এবং " ধারণকৃত " মানগুলির জন্য IE8 ফ্যালব্যাক হিসাবে ব্যবহার করা যেতে পারে। কটাক্ষপাত আছে ডেমো ।

Comments

Jquery.backgroundSize.js এর ডকুমেন্টেশন অনুসারে, প্লাগইনটি হ্রাস করা হয়েছে এবং তারা পরিবর্তে পটভূমির আকার-পলিফিলের প্রস্তাব দেয় ।

— ভয়েডহ্যান্ড

আপডেট করা সংস্করণটি কাজ করে না background-position: fixed।

— রায়ান বার্নি

@ ওভিডহ্যান্ড এবং ফিল্টার এবং পলিফিল উভয়ই আমার পক্ষে কাজ করেনি, আমি সাফল্যের জন্য jquery.backgroundSize ব্যবহার করেছি

— ক্রিস মেরিসিক

Answer 3

এই পোস্টের জন্য ধন্যবাদ, ক্রস ব্রাউজার সুখের জন্য আমার সম্পূর্ণ সিএসএস হ'ল:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

কোডের এই অংশটিতে কাজ করার পরে অনেক দিন হয়েছে, তবে আমি আরও ব্রাউজারের সামঞ্জস্যের জন্য যুক্ত করতে চাই আমি আরও ব্রাউজারের সামঞ্জস্যের জন্য এটি আমার সিএসএসে যুক্ত করেছি:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Comments

@ গৌরব 123 চেষ্টা করুন-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

— হনক 31

এটি আমার আই 8 কে দুইবার ব্যাকগ্রাউন্ড চিত্র প্রদর্শন করতে সক্ষম করে - একটি ছোট আকারের মাত্রা এবং দ্বিতীয়টি বড় আকারের নয় এমন ব্যাকগ্রাউন্ড।

— arekk

ie7: ঠিক আছে, তবে লিঙ্কগুলিতে আর ক্লিক করতে পারবেন না। (কেন ie7? সরকারী সাইটগুলি আপডেট করা খুব ধীর)

— রবি ম্যাথিউজ

Answer 4

এমনকি পরে, তবে এটি কার্যকরও হতে পারে। আপনি পটভূমি-আকারের জন্য পলিফিল হিসাবে ব্যবহার করতে পারেন এমন jQuery-backstretch- প্লাগইন রয়েছে: কভার। আমার ধারণা, jQuery সহ CSS- ব্যাকগ্রাউন্ড-url সম্পত্তি দখল করা এবং এটি jQuery-backstretch প্লাগইন এ খাওয়ানো সম্ভব (এবং মোটামুটি সহজ) হতে হবে be আধুনিক অনুশীলনের সাথে ব্যাকগ্রাউন্ড-আকারের-সমর্থনের জন্য পরীক্ষা করা এবং এই প্লাগইনটিকে ফ্যালব্যাক হিসাবে ব্যবহার করা ভাল অভ্যাস।

ব্যাক স্ট্রেচ-প্লাগইনটি এখানে SO তে উল্লেখ করা হয়েছিল । JQuery-backstretch- প্লাগইন-সাইট এখানে ।

অনুরূপ ফ্যাশনে আপনি একটি jQuery- প্লাগইন বা স্ক্রিপ্ট তৈরি করতে পারেন যা আপনার পরিস্থিতিতে ব্যাকগ্রাউন্ড-আকারের কাজ করে (ব্যাকগ্রাউন্ড-আকার: 100%) এবং IE8- এ। সুতরাং আপনার প্রশ্নের উত্তর দেওয়ার জন্য: হ্যাঁ একটি উপায় আছে তবে এটিএম-তে কোনও প্লাগ-অ্যান্ড-প্লে সমাধান নেই (যেমন আপনাকে নিজের কোডিং করতে হবে)।

(অস্বীকৃতি: আমি ব্যাক স্ট্রেচ-প্লাগইনটি ভালভাবে পরীক্ষা করে দেখিনি তবে এটি ব্যাকগ্রাউন্ড-আকারের মতোই করা হবে বলে মনে হচ্ছে: কভার)

Answer 5

তার জন্য একটি ভাল পলফিল রয়েছে: লুইস্রেমি / ব্যাকগ্রাউন্ড-আকার-পলিফিল

ডকুমেন্টেশন উদ্ধৃতি:

আপনার ওয়েবসাইটটিতে ব্যাকগ্রাউন্ডসাইজ.মিন.এইচটিসি আপলোড করুন। .Htaccess যা আইই দ্বারা প্রয়োজনীয় মাইম প্রকারটি প্রেরণ করবে (কেবলমাত্র অ্যাপাচি - এটি এনগিনেক্স, নোড এবং আইআইএস এ নির্মিত)।

আপনি নিজের সিএসএসে যেখানেই পটভূমি-আকার ব্যবহার করেন না কেন, এই ফাইলটিতে একটি রেফারেন্স যুক্ত করুন।

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Comments

এই পলিফিলটি কেবল কাজ করে। পটভূমি-আকার: কভার বা আই 8 অন্তর্ভুক্ত। কোন ঝাঁকুনি নেই, গোলমাল নেই।

— জিমলংগো

এই পদ্ধতির সমর্থন উভয় containএবং cover। এটিতে 5.7KB খুব খারাপ নয় কারণ এটি একটি নেটওয়ার্ক প্যাকেটে স্থানান্তর করবে।

— এসএমমৌসভি

Answer 6

আইই ১১ উইন্ডোজে এটি আমার পক্ষে কাজ করেছে,

background-size: 100% 100%;

Answer 7

আপনি এই ফাইলটি ব্যবহার করতে পারেন ( https://github.com/louisremi/background-size-polyfill "ব্যাকগ্রাউন্ড-আকারের পলিফিল") ব্যবহার করার জন্য সত্যই সহজ:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}

Answer 8

আমি নিম্নলিখিত স্ক্রিপ্ট দিয়ে চেষ্টা করেছি -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

এটা আমার জন্য কাজ!

Comments

কি সংস্করণ জন্য?

— নিহির