একটি 'অটো' উচ্চতা সহ 100% প্রস্থের পটভূমি চিত্র

Question 1

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

ব্যাকগ্রাউন্ড চিত্রের সাথে ডিভের ব্যাকগ্রাউন্ডটি প্রদর্শনের জন্য প্রস্থ এবং উচ্চতা উভয়ই দরকার বলে আমি এটি সঠিকভাবে কাজ করতে পারি বলে মনে হচ্ছে না। আমি স্পষ্টতই 'প্রস্থ: 100%' ব্যবহার করতে পারি তবে উচ্চতার জন্য আমি কী ব্যবহার করব? আমি 150px এর মতো এলোমেলোভাবে নির্দিষ্ট উচ্চতা রাখতে পারি এবং তারপরে আমি চিত্রের শীর্ষ 150px দেখতে পারি তবে স্থির উচ্চতা না থাকায় এটি সমাধান নয়। আমার একটি নাটক ছিল এবং আমি দেখতে পেলাম যে একবার উচ্চতা (150px দিয়ে পরীক্ষিত) হয়ে গেলে আমি 'ব্যাকগ্রাউন্ড-সাইজ: 100%' ডিভাইসে চিত্রটি সঠিকভাবে ফিট করতে পারি। আমি এই প্রকল্পটির জন্য আরও সাম্প্রতিক সিএসএস 3 ব্যবহার করতে পারি কারণ এটি কেবলমাত্র মোবাইলের লক্ষ্য।

আমি নীচে একটি মোটামুটি উদাহরণ যুক্ত করেছি। দয়া করে ইনলাইন শৈলীগুলি ক্ষমা করুন তবে আমি আমার প্রশ্নটি আরও পরিষ্কার করার চেষ্টা করার জন্য একটি মৌলিক উদাহরণ দিতে চাই।

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

পুরো পৃষ্ঠার উপর ভিত্তি করে আমার কি ধারক ডিভিটি শতাংশের উচ্চতা দিতে হবে বা আমি এটি সম্পূর্ণ ভুল দেখছি?

এছাড়াও, আপনার কি মনে হয় সিএসএস ব্যাকগ্রাউন্ডগুলি এটি করার সর্বোত্তম উপায়? সম্ভবত একটি কৌশল আছে যা ডিভাইস / স্ক্রিনের প্রস্থের ভিত্তিতে বিভিন্ন ইমগ ট্যাগ পরিবেশন করে। সাধারণ ধারণাটি হ'ল ল্যান্ডিং পৃষ্ঠার টেমপ্লেটটি বিভিন্ন পণ্য চিত্রগুলির সাথে বহুবার ব্যবহৃত হবে তাই আমার এটি নিশ্চিত করা দরকার যে আমি এটি সর্বোত্তম উপায়ে বিকাশ করতে পারি।

আমি ক্ষমাপ্রার্থী হ'ল এটি সামান্য দীর্ঘ-বায়ুযুক্ত তবে আমি এই প্রকল্পটি থেকে পরের দিকে এগিয়ে এসেছি তাই আমি এই সামান্য কাজটি করতে চাই। আপনার সময়ের জন্য আগাম ধন্যবাদ, এটি অনেক প্রশংসিত। শ্রদ্ধা

Question 2

background-imageআপনি imgসরাসরি ব্যবহারের পরিবর্তে এবং ভিউপোর্টের সমস্ত প্রস্থ ছড়িয়ে দেওয়ার জন্য চিত্রটি ব্যবহার করতে চেষ্টা করুন max-width:100%;এবং দয়া করে মনে রাখবেন যে আপনার মূল ধারক ডিভের কোনও প্যাডিং বা মার্জিন প্রয়োগ করবেন না কারণ তারা ধারকটির মোট প্রস্থ বৃদ্ধি করবে। এই নিয়মটি ব্যবহার করে আপনার ব্রাউজারের প্রস্থের সমান চিত্রের প্রস্থ থাকতে পারে এবং দিক অনুপাত অনুসারে উচ্চতাও পরিবর্তিত হবে। ধন্যবাদ

সম্পাদনা: উইন্ডোর বিভিন্ন আকারে চিত্র পরিবর্তন করা

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

স্নিপেট প্রসারিত করুন

এইভাবে আপনি ব্রাউজারের বিভিন্ন আকারে আপনার চিত্রটি পরিবর্তন করেন।

Question 3

টিম এস একটি "সঠিক" উত্তরের খুব কাছে ছিলেন তখন বর্তমানে গৃহীত উত্তরটি। আপনি যদি 100% প্রস্থের, পরিবর্তনশীল উচ্চতা ব্যাকগ্রাউন্ড চিত্রটি সিএসএসের সাথে সম্পন্ন করতে চান cover(যা চিত্রটিকে পাশ থেকে প্রসারিত করতে দেয়) বা contain(যা চিত্রটিকে একেবারে প্রসারিত করতে দেয় না), কেবল সিএসএসকে এর মতো সেট করুন:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

এটি আপনার পটভূমি চিত্রটি 100% প্রস্থে সেট করবে এবং উচ্চতাটিকে ওভারফ্লোতে অনুমতি দেবে। এখন আপনি জাভাস্ক্রিপ্টের উপর নির্ভর না করে সেই চিত্রটি সরিয়ে নিতে মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন।

সম্পাদনা: আমি ঠিক বুঝতে পেরেছি (3 মাস পরে) আপনি সম্ভবত চিত্রটি উপচে পড়তে চান না; আপনি মনে করেন যে ধারক উপাদানটি এর ব্যাকগ্রাউন্ড-ইমেজের উপর ভিত্তি করে আকার পরিবর্তন করতে চায় (এটির অনুপাতটি সংরক্ষণের জন্য), যা আমি যতদূর জানি সিএসএস দিয়ে সম্ভব নয়।

আশা করি শীঘ্রই আপনি উপাদানটিতে নতুন srcset বৈশিষ্ট্যটি ব্যবহার করতে সক্ষম হবেন img। আপনি যদি imgএখনই উপাদানগুলি ব্যবহার করতে চান তবে বর্তমানে গৃহীত উত্তর সম্ভবত সেরা।

তবে, আপনি নিখুঁত সিএসএস ব্যবহার করে ধ্রুবক দিক অনুপাত সহ একটি প্রতিক্রিয়াশীল পটভূমি-চিত্র উপাদান তৈরি করতে পারেন। এটি করার জন্য, আপনি height0 টি সেট করেছেন padding-bottomএবং এ জাতীয় উপাদানটির নিজস্ব প্রস্থের শতাংশকে সেট করেছেন :

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

বিভিন্ন দিক অনুপাত ব্যবহার করতে, মূল চিত্রটির উচ্চতাটিকে তার নিজস্ব প্রস্থ দ্বারা ভাগ করুন এবং শতাংশের মান পেতে 100 দ্বারা গুণ করুন। এটি কাজ করে কারণ প্যাডিং শতাংশটি সর্বদা প্রস্থের ভিত্তিতে গণনা করা হয়, এমনকি এটি উল্লম্ব প্যাডিংয়ের পরেও।

Question 4

এটা চেষ্টা কর

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

সরলীকৃত সংস্করণ

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Question 5

আপনি সিএসএস সম্পত্তি ব্যবহার করতে পারেন background-size এবং এটি আপনার পছন্দ অনুসারে সেট করতে পারেন coverবা set containকভারটি উইন্ডোটিকে পুরোপুরি willেকে দেবে, যখন একটি অংশটি উইন্ডোটিকে পুরোপুরি coveringেকে রাখবে না (পর্দার দিকের অনুপাতটি চিত্রের সমান না হয়ে থাকে) fit

দয়া করে মনে রাখবেন এটি একটি CSS3 সম্পত্তি। পুরানো ব্রাউজারগুলিতে, এই সম্পত্তিটিকে উপেক্ষা করা হয়। বিকল্পভাবে, আপনি উইন্ডো আকারের উপর নির্ভর করে CSS সেটিংস পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন, তবে এটি পছন্দসই নয়।

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Question 6

কেবল একটি দুটি রঙের পটভূমি চিত্র ব্যবহার করুন:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Question 7

সিএসএস যুক্ত করুন:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

এবং এইচটিএমএল হ'ল:

<div class="bg-mg"></div>

সিএসএস: পটভূমির চিত্রটি 100% প্রস্থ এবং পর্দার উচ্চতায় প্রসারিত করবেন?

Question 8

এটি 2017, এবং এখন আপনি অবজেক্ট-ফিট ব্যবহার করতে পারেন যার শালীন সমর্থন রয়েছে । এটি ডিভের মতো একইভাবে কাজ background-sizeকরে তবে উপাদানটিতে এবং ইমেজ সহ যে কোনও উপাদানগুলিতে।

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Question 9

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}