একটি ডিভিডি পূরণ করতে কিভাবে পটভূমি চিত্র প্রসারিত করা যায়

Question

আমি বিভিন্ন ডিভগুলিতে একটি ব্যাকগ্রাউন্ড চিত্র সেট করতে চাই, তবে আমার সমস্যাগুলি হ'ল:

1. চিত্রের আকার স্থির করা হয়েছে (60px)।
2. ডিভের আকারের পরিবর্তন করা

ডিভের পুরো ব্যাকগ্রাউন্ডটি পূরণ করতে আমি কীভাবে ব্যাকগ্রাউন্ড-চিত্রটি প্রসারিত করতে পারি?

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

এখানে কোড চেক করুন।

Answer 1

যোগ

background-size:100% 100%;

ব্যাকগ্রাউন্ড-চিত্রের নীচে আপনার সিএসএসে।

আপনি সঠিক মাত্রাও নির্দিষ্ট করতে পারেন, যেমন:

background-size: 30px 40px;

এখানে: জেএসফিডাল

Comments

আইই এটি সমর্থন করে না। করতে হবে?

— কার্শো

এটি কাজ করে না, আরও ভাল উত্তরের জন্য নমুনা দেখুন: পটভূমি-আকার: 100% 100%;

— ক্রিসকাটফর

কনটেইনারটি ফিট করার জন্য চিত্রটি প্রসারিত করার পরিবর্তে কেন এটি গুণাচ্ছে

— ফোরাম জ্ঞান

আপনাকে যোগ করতে হবেbackground-repeat: no-repeat;

— রোরিক

হেন্ডো, আপনার জেএসফিডাল আর কাজ করছে না (হুটসুয়েটের মৃত লিঙ্ক), আপনি কি এটি আপডেট করতে পারেন?

— টাইলারএইচ 4'15

Answer 2

তুমি ব্যবহার করতে পার:

background-size: cover;

বা কেবল এর সাথে একটি বড় পটভূমি চিত্র ব্যবহার করুন:

background: url('../images/teaser.jpg') no-repeat center #eee;

Comments

কভার

— স্ট্র্যাচ

আমি জানি না আপনি আপনার ব্যাকগ্রাউন্ডের img নিয়ে কী করার চেষ্টা করছেন তবে চিত্রটি প্রসারিত না করেই background-size: cover; background-position: centerএর পটভূমিটি পূর্ণ করবেdiv

— Ouadie

এমন চিত্রগুলির জন্য দুর্দান্ত কাজ করে যেখানে প্রসারিতকরণ চিত্রটিকে বিকৃত করে!

— স্টিজন ভ্যান বেল

Answer 3

আধুনিক সিএসএস 3 (ভবিষ্যতের জন্য প্রস্তাবিত এবং সম্ভবত সেরা সমাধান)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

সর্বোচ্চ। শস্য এবং বিকৃতি ছাড়াই প্রসারিত করুন (ব্যাকগ্রাউন্ডটি পূরণ নাও করতে পারে) : background-size: contain;
নিরঙ্কুশ প্রসারিতকে চাপ দিন (বিকৃতির কারণ হতে পারে তবে কোনও ফসলের কারণ হতে পারে) : background-size: 100% 100%;

"ওল্ড" সিএসএস "সর্বদা কাজ" উপায়

(আপেক্ষিক অবস্থানযুক্ত) পিতামাতার প্রথম সন্তান হিসাবে সম্পূর্ণ পজিশনিং চিত্র এবং এটি পিতামাতার আকারে প্রসারিত।

এইচটিএমএল

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

CSS3 এর সমতুল্য background-size: cover;:

এই গতিশীলরূপে অর্জন করতে, আপনাকে কন্ট্রোল পদ্ধতির বিকল্পের বিপরীতটি ব্যবহার করতে হবে (নীচে দেখুন) এবং যদি আপনি ক্রপড চিত্রটি কেন্দ্রের প্রয়োজন হয় তবে আপনার গতিশীলভাবে এটি করার জন্য একটি জাভাস্ক্রিপ্টের প্রয়োজন হবে - যেমন jQuery ব্যবহার করে:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

ব্যবহারিক উদাহরণ:

CSS3 এর সমতুল্য background-size: contain;:

এটি কিছুটা জটিল হতে পারে - আপনার পটভূমির মাত্রা যা পিতামাতার উপচে পড়বে তাতে সিএসএস সেট করা থাকবে অন্য একটিকে অটোতে সেট করে 100%। ব্যবহারিক উদাহরণ:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

CSS3 এর সমতুল্য background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

পিএস: সম্পূর্ণ গতিশীলভাবে "পুরানো" উপায়ে কভার / সমষ্টির সমতুল্য কাজগুলি করতে (যাতে আপনাকে ওভারফ্লো / অনুপাত সম্পর্কে কোনও চিন্তা করতে হবে না) আপনার জন্য অনুপাতগুলি সনাক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করতে হবে এবং বর্ণিত মাত্রা নির্ধারণ করতে হবে। ..

Comments

অন্যান্য "কভার" উত্তরের চেয়ে আরও সম্পূর্ণ উত্তর। দুর্ভাগ্যক্রমে, এটি নীচের কাছাকাছি এখানে আটকে আছে ...

— বিলিএনয়ার

Answer 4

এর জন্য আপনি CSS3 background-sizeসম্পত্তি ব্যবহার করতে পারেন । এভাবে লিখুন:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

এটি দেখুন: http://jsfiddle.net/qdzaw/1/

Comments

আইই এটি সমর্থন করে না। করতে হবে?

— কার্শো

আইই ব্যবহারের জন্য আইএমজি ট্যাগ উচ্চতা এবং প্রস্থের সাথে 100% অবস্থান নির্ধারণ করে।

— সন্দীপ

Answer 5

আপনি যোগ করতে পারেন:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

আপনি এটি সম্পর্কে এখানে আরও পড়তে পারেন: CSS3 ব্যাকগ্রাউন্ড-আকার

Comments

গৃহীত উত্তরের চেয়ে অনেক বেশি ভাল, প্রদত্ত এটি আপনাকে দেখায় যে প্রস্থ এবং উচ্চতার জন্য ব্যাকগ্রাউন্ড-আকারটি 2 টি মান গ্রহণ করে।

— krb686

ব্যাকগ্রাউন্ড-আকারটি একটি

— CSS3

Answer 6

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

Answer 7

সম্পত্তি সিএসএস ব্যবহার করে:

background-size: cover;

Comments

ব্যাকগ্রাউন্ড-আকারটি একটি

— CSS3

Answer 8

ব্যবহার: পটভূমি-আকার: 100% 100%; ডিভ আকার মাপসই পটভূমি চিত্র করতে।

Comments

এটিই আমি খুঁজছিলাম - মূলটির অনুপাত অনুপাত বিবেচনা না করে ফিট করার জন্য প্রসারিত করুন। ধন্যবাদ।

— ডিজিগ

Answer 9

দিক অনুপাত রাখতে, ব্যবহার করুন background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

Answer 10

এরকম কিছু চেষ্টা করুন:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}