প্রস্থে ফিট করার জন্য সিএসএস ব্যাকগ্রাউন্ড চিত্র, উচ্চতা অনুপাতে স্বয়ংক্রিয়ভাবে স্কেল করা উচিত

Question

আমার আছে

body {
    background: url(images/background.svg);
}

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

এই মুহুর্তে, ফায়ারফক্স মনে হচ্ছে এটি উচ্চতা ফিট করে এবং এর প্রস্থ সামঞ্জস্য করে। এটি সম্ভবত কারণ উচ্চতা দীর্ঘতম মাত্রা এবং এটি ক্রপ এড়ানোর চেষ্টা করছে? আমি উল্লম্বভাবে ক্রপ করতে চাই , তারপরে স্ক্রোল করুন: অনুভূমিক পুনরাবৃত্তি হবে না।

এছাড়াও, ক্রোম চিত্রটি কেন্দ্রে রেখে দিচ্ছে, কোনও পুনরাবৃত্তি ঘটেনি, এমনকি background-repeat:repeatস্পষ্টভাবে দেওয়া হলেও যা কোনওভাবেই ডিফল্ট।

Comments

নেই html, body { height: 100%; }সহায়তা প্রয়োজন? এছাড়াও, কাশি ।

— ত্রিশডট

এটি ক্রোম গুগলে কাজ করে না

— সাইমন

Answer 1

এর জন্য একটি CSS3 সম্পত্তি রয়েছে, যথা background-size( সামঞ্জস্যতা পরীক্ষা )। এক দৈর্ঘ্য মানগুলি সেট করতে পারেন, তাহলেও এটি সাধারণত বিশেষ মান ব্যবহার করা হয়ে containএবং cover। আপনার নির্দিষ্ট ক্ষেত্রে, আপনার ব্যবহার করা উচিত cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

এর জন্য ডিম্বাশক্তি containএবংcover

খারাপ শ্লেষের জন্য দুঃখিত, তবে আমি বিশ্বকাপের গাঙ্গুলির সেই দিনের ছবিটি প্রদর্শনের জন্য ব্যবহার করতে যাচ্ছি । বলুন যে এটি আপনার স্ক্রিন এবং ধূসর অঞ্চলটি আপনার দৃশ্যমান স্ক্রিনের বাইরে। প্রদর্শনের জন্য, আমি একটি 16x9 অনুপাত ধরে যাচ্ছি।

আমরা দিনের পূর্বোক্ত চিত্রটিকে পটভূমি হিসাবে ব্যবহার করতে চাই। তবে আমরা কোনও কারণে চিত্রটি 4x3 এ কেটেছি। আমরা background-sizeসম্পত্তিটি কিছু স্থির দৈর্ঘ্যে নির্ধারণ করতে পারি, তবে আমরা ফোকাস করব containএবং cover। মনে রাখবেন যে আমি এটিও ধরে নিয়েছি যে আমরা প্রস্থ এবং / বা উচ্চতা ম্যাঙ্গাল করি নি body।

contain

contain

ইমেজটির অভ্যন্তরীণ দিক অনুপাত (যদি থাকে তবে) সংরক্ষণ করার সময়, বৃহত্তর আকারে যেমন এর প্রস্থ এবং দৈর্ঘ্য উভয়ই পটভূমি অবস্থানের অঞ্চলে ফিট করতে পারে।

এটি নিশ্চিত করে যে ব্যাকগ্রাউন্ড চিত্রটি সর্বদা পুরোপুরি পটভূমির অবস্থান অঞ্চলে থাকে তবে background-colorএই ক্ষেত্রে আপনার সাথে কিছু খালি জায়গা ভরা থাকতে পারে :

cover

cover

চিত্রটি এর অভ্যন্তরীণ দিক অনুপাত (যদি থাকে তবে) সংরক্ষণ করার সময়, ছোট আকারে যেমন এর প্রস্থ এবং উচ্চতা উভয়ই ব্যাকগ্রাউন্ড অবস্থানের অঞ্চলটি পুরোপুরি coverেকে দিতে পারে।

এটি নিশ্চিত করে যে ব্যাকগ্রাউন্ড চিত্রটি সমস্ত কিছু আবরণ করছে। কোনও দৃশ্যমান হবে না background-color, তবে পর্দার অনুপাতের উপর নির্ভর করে আপনার চিত্রের একটি দুর্দান্ত অংশ কেটে ফেলা হতে পারে:

প্রকৃত কোড সহ বিক্ষোভ

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Comments

ধন্যবাদ, আমি ঠিক এটি চাই। এটি Chrome (বা ক্রোমিয়াম অন্তত) তে কাজ করছে বলে মনে হচ্ছে না - কোনও উজ্জ্বল ধারণা পেয়েছেন?

— স্প্রাফ

Quirksmode.org/css/contents.html#t44 অনুসারে এটি কোনও উপসর্গ ছাড়াই Chrome এ কাজ করা উচিত। তবে, আপনি কি -webkit-উপসর্গ চেষ্টা করেছেন ?

— জিটা

ইয়াহেনের উত্তর (এই পৃষ্ঠার নীচে) আসলে আমি যা খুঁজছিলাম তা ছিল:background-size: contain

— ড্যানি বেকেট

@ ড্যানিবেকেট: এটি সম্ভব হওয়ার পরেও ওপি যা খুঁজছিল তা নয়: "আমি উল্লম্বভাবে ক্রপ করতে চাই, তারপর স্ক্রোল করুন: অনুভূমিক পুনরাবৃত্তি হবে না।"

— জেতা

containজুম ফিট মত। coverজুম ফিলের মতো। containপ্রস্থ এবং উচ্চতার মধ্যে বৃহত্তর মাত্রা মেলাতে চিত্রের আকার সামঞ্জস্য করে। coverপ্রস্থ এবং উচ্চতার মধ্যে ছোট মাত্রা মেলাতে চিত্রের আকার সামঞ্জস্য করে।

— অহনিবিজ্যাকড

Answer 2

Https://developer.mozilla.org/en-US/docs/CSS/background-size এর টিপসের উপর ভিত্তি করে আমি নিম্নলিখিত রেসিপিটি শেষ করেছি যা আমার জন্য কাজ করেছিল

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Comments

যদিও আমি ব্যবহার করেছি background-position: center;, এটি আমার চেয়ে ভাল কাজ করেছে backgound-size: cover;।

— নাট

আমি জানতে পারি কেন আমাদের overflow-y: hiddenঅংশটি প্রয়োজন ?

— নাম জি ভিউ

Answer 3

আপনি ঠিক কীটি সন্ধান করছেন তা সম্পর্কে আমি নিশ্চিত নই, তবে ক্রিস কোয়েরিয়ার সিএসএস-ট্রিকস থেকে লেখা এই দুর্দান্ত ব্লগ পোস্টগুলি আপনার সত্যই পরীক্ষা করা উচিত:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

প্রতিটি নিবন্ধের জন্য বিবরণ পড়ুন এবং দেখুন যে তারা যা খুঁজছেন তা সেগুলি কিনা।

প্রথমটি নিম্নলিখিত প্রশ্নের উত্তর দেয়:

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

দ্বিতীয় পোস্টের লক্ষ্য নিম্নলিখিতটি পাওয়া, একটি "একটি ওয়েবসাইটের পটভূমি চিত্র যা সর্বকালে পুরো ব্রাউজার উইন্ডোটি windowেকে দেয়"।

আশাকরি এটা সাহায্য করবে.

Answer 4

ব্যাকগ্রাউন্ড চিত্রটি পারফেক্ট সেট করা হয় না তবে তার সিএসএস সমস্যা তৈরি হয় যাতে তার সিএসএস ফাইলটি নীচের কোডে পরিবর্তন হয়

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

% পটভূমি-আকার: 100% 100%; "

Answer 5

এটা চেষ্টা কর,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Answer 6

কেবল এই এক লাইন যুক্ত করুন:

    .your-class {
        height: 100vh;
    }

vh ভিউপোর্টের উচ্চতা। এটি স্বয়ংক্রিয়ভাবে ডিভাইসের ব্রাউজার উইন্ডোতে ফিট করতে স্কেল করবে।

এখানে আরও দেখুন: ব্রাউজার উইন্ডোটির 100% উচ্চতা তৈরি করুন

Answer 7

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Comments

সমস্যাটি হুবহু কীভাবে বর্ণনা করুন এবং কীভাবে আপনি এটি সমাধান করেন, দয়া করে ব্যাখ্যা ছাড়াই এখানে একটি গুচ্ছ কোড পেস্ট করবেন না।

— সায়াভাশ

Answer 8

আমার একই সমস্যা ছিল, ব্রাউজারের মাত্রা সামঞ্জস্য করার সময় চিত্রটির আকার পরিবর্তন করতে অক্ষম।

খারাপ কোড:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

গুড কোড:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

এখানে মূল কীটি এই উপাদানটির সংযোজন -> ব্যাকগ্রাউন্ড-আকার: ধারণ করে;

Answer 9

আমার জন্য যা কাজ করেছে তা এখানে:

background-size: auto 100%;

Answer 10

ব্যাকগ্রাউন্ডের আকার নির্ধারণে কোনও লাভ হয় না, নিম্নলিখিত সমাধানগুলি আমার পক্ষে কাজ করেছে:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

এটি মূলত চিত্রটি কাটা এবং এটি ফিট করে, background-size: contain/coverএখনও এটি ফিট করে নি।