ডিভিডিতে পটভূমির চিত্র ফিট করুন

Question

নিম্নলিখিত ডিভাইসে আমার একটি পটভূমি চিত্র রয়েছে তবে চিত্রটি কেটে যায়:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

ব্যাকগ্রাউন্ড চিত্রটি কেটে না ফেলে দেখানোর কোনও উপায় আছে?

Comments

ছবিটি ডিভের চেয়ে বড়?

— grc

হ্যাঁ চিত্রটি ডিভের চেয়ে বড়

— রাজীব

পটভূমি চিত্র: URL (/media/img_1_bg.jpg); পটভূমি আকার: ধারণ; পটভূমি-পুনরাবৃত্তি: কোন-পুনরাবৃত্তি;

— ওয়ারুনা মঞ্জুলা

Answer 1

আপনি background-sizeসম্পত্তি দ্বারা এটি অর্জন করতে পারেন , যা এখন বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত ।

ডিভের অভ্যন্তরে পটভূমির চিত্রটি স্কেল করতে:

background-size: contain;

পুরো ডিভটি কভার করতে ব্যাকগ্রাউন্ড চিত্রটি স্কেল করতে:

background-size: cover;

জেএসফিডেলের উদাহরণ

IE 5.5+ সমর্থনের জন্য একটি ফিল্টার পাশাপাশি কিছু পুরানো ব্রাউজারগুলির জন্য বিক্রেতা উপসর্গও রয়েছে ।

Answer 2

যদি আপনার যা প্রয়োজন তা ইমেজটি ডিভের একই মাত্রা থাকতে পারে, আমি মনে করি এটিই সবচেয়ে মার্জিত সমাধান:

background-size: 100% 100%;

যদি তা না হয় তবে @grc এর উত্তরটি সবচেয়ে বেশি বরাদ্দযুক্ত।

সূত্র: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Comments

অবশেষে আমি পটভূমির সাথে পুরো ডিভ ফিট করার সমাধানটি খুঁজে পেয়েছি। ধন্যবাদ!

— কামিল রাইকভস্কি

তবে এটি চিত্রটি প্রসারিত করবে ... পটভূমি চিত্রটি প্রসারিত না করে ফিট করার কোনও উপায় আছে কি?

— জুনেদ

অ্যাসপেক্ট রেশিও হেরে গেছে।

— 7:39

@ শিখর এটা সাধারণ জ্ঞান।

— বৈভব বিশাল

Answer 3

আপনি এই বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন:

background-size: contain;
background-repeat: no-repeat;

এবং আপনার কোডটি তখন এর মতো:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

Answer 4

আপনি এটি ব্যবহার করুন:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

আমি আপনার ডিভ-মান জানি না, তবে ধরা যাক আপনি সেগুলি পেয়েছেন।

height: auto;
max-width: 600px;

আবার, সেগুলি কেবল এলোমেলো সংখ্যা। ডিভের জন্য একটি নির্দিষ্ট প্রস্থের সাথে ব্যাকগ্রাউন্ড-চিত্রটি তৈরি করতে (যদি আপনি চান) তৈরি করা বেশ শক্ত হয়ে উঠতে পারে, তবে সর্বোচ্চ-প্রস্থ আরও ভাল ব্যবহার করুন। এবং ব্যাকগ্রাউন্ড-ইমেজ দিয়ে কোনও ডিভিটি পূরণ করা জটিল নয়, কেবল নিশ্চিত করুন যে আপনি পিতামাতার উপাদানটিকে সঠিক উপায়ে স্টাইল করেছেন, যাতে চিত্রটির এমন কোনও স্থান রয়েছে যেখানে এটি প্রবেশ করতে পারে।

ক্রিস

Comments

একটি সর্বাধিক ভোট দেওয়া উত্তরের লিঙ্ক যা এই সমাধান সম্পর্কে আরও বিশদে আলোচনা করে: stackoverflow.com/questions/600743/… এবং কীভাবে গণনা করতে হবে তা আপনাকে দেখায় padding-top।

— জন লি