উত্তর:
আরেকটি, সম্ভবত অদক্ষ, সমাধান হতে হবে একটি imgউপাদান হিসাবে সেট ইমেজ অন্তর্ভুক্ত visibility: hidden;। তারপরে background-imageআশেপাশের ডিভের চিত্রটি একই করুন।
এটি imgউপাদানটির মধ্যে চিত্রের আকারের চারপাশে ডিভ সেট করবে তবে এটি একটি পটভূমি হিসাবে প্রদর্শন করবে।
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>imgযাইহোক আপনার মার্কআপে একটি প্রবেশাধিকার স্থাপন করতে যাচ্ছেন তবে কেন কেবল আসলটি লুকিয়ে রাখবেন না এবং একটির সাথে বিরক্ত করবেন না কেন ? এভাবে জিনিস করার সুবিধা কী? <img>background-image
background-imageহ'ল এটি সিএসএস মিশ্রণ-মোডগুলি ব্যবহার করতে পারে , যেখানে imgপারে না।
কোনও imgউপাদানটির মতো একটি পটভূমি চিত্র তৈরি করার জন্য খুব সুন্দর এবং দুর্দান্ত উপায় রয়েছে যাতে এটি এর heightস্বয়ংক্রিয়ভাবে সামঞ্জস্য হয়। আপনার চিত্র widthএবং heightঅনুপাত সম্পর্কে জানতে হবে। ধারকটির height0 টি সেট করুন padding-topএবং চিত্র অনুপাতের ভিত্তিতে শতাংশ হিসাবে সেট করুন ।
এটি নীচের মত দেখাবে:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}আপনি সবেমাত্র অটোর উচ্চতার সাথে একটি পটভূমি চিত্র পেয়েছেন যা কোনও আইএমজি উপাদানটির মতো কাজ করবে। এখানে একটি কার্যকারী প্রোটোটাইপ রয়েছে (আপনি আকারটি উচ্চারণ করতে পারেন এবং ডিভ উচ্চতাটি পরীক্ষা করতে পারেন): http://jsfiddle.net/TPEFn/2/
@mixin div-same-size-as-background-img($url) { background-image: url($url); background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: percentage(image-height($url) / image-width($url)); }
position:relativeDIV আছে এবং সাথে অন্য DIV আছে ভিতরে রাখা position:absolute; top:0; bottom:0; left:0; right:0;সেট
সিএসএস ব্যবহার করে ব্যাকগ্রাউন্ড চিত্রের আকারের জন্য অটো সামঞ্জস্য করার কোনও উপায় নেই।
আপনি সার্ভারে পটভূমি চিত্রটি পরিমাপ করে এবং তারপরে ডিভের সাথে এই বৈশিষ্ট্যগুলি প্রয়োগ করে এর চারপাশে হ্যাক করতে পারেন, অন্যরা যেমন উল্লেখ করেছে।
চিত্রের আকারের উপর ভিত্তি করে ডিআইভি আকার পরিবর্তন করতে আপনি কিছু জাভাস্ক্রিপ্ট হ্যাক করতে পারেন (একবার চিত্র ডাউনলোড হয়ে গেলে) - এটি মূলত একই জিনিস।
ছবিটি স্বয়ংক্রিয়ভাবে ফিট করার জন্য আপনার ডিভের প্রয়োজন হলে আমি জিজ্ঞাসা করতে পারি যে আপনি কেবল <img>নিজের ডিভের ভিতরে কোনও ট্যাগ রাখেন না কেন ?
srcএকটি পরিবর্তন করতে পারবেন না img, তবে মিডিয়া ক্যোয়ারী সহ আপনি একটি পটভূমি চিত্র হিসাবে ব্যবহৃত ফাইলটি পরিবর্তন করতে পারেন।
এই উত্তরটি অন্যদের মতো, তবে বেশিরভাগ অ্যাপ্লিকেশনগুলির জন্য সামগ্রিকভাবে সেরা। আপনি সাধারণত যা করেন তার আগে আপনাকে চিত্রের আকার জানতে হবে। এটি আপনাকে ওভারলে পাঠ্য, শিরোনাম ইত্যাদি যুক্ত করতে দেবে যাতে কোনও নেতিবাচক প্যাডিং বা চিত্রের পরম অবস্থান থাকে না। নীচের উদাহরণে দেখানো চিত্রের অনুপাতের সাথে মেলে তারা কীটি প্যাডিং সেট করে। আমি এই উত্তরটি ব্যবহার করেছি এবং মূলত একটি চিত্রের পটভূমি যুক্ত করেছি।
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>হতে পারে এটি সাহায্য করতে পারে, এটি ঠিক পটভূমি নয়, তবে আপনি ধারণাটি পাবেন:
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>float: left;তার অবস্থানটি ভেঙেছে
খুব নিশ্চিত যে এখান থেকে এখানে কখনও দেখা যায় না। তবে আপনার সমস্যাটি যদি আমার মতো হয় তবে এটিই ছিল আমার সমাধান:
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}আমি ইমেজটির কেন্দ্রে একটি ডিভ রাখতে চাই এবং এটি আমাকে এটির অনুমতি দেবে।
একটি খাঁটি সিএসএস সমাধান রয়েছে যা অন্য উত্তরগুলি মিস করেছে।
"সামগ্রী:" বৈশিষ্ট্যটি বেশিরভাগ ক্ষেত্রে কোনও উপাদানগুলিতে পাঠ্য সামগ্রী সন্নিবেশ করানোর জন্য ব্যবহৃত হয়, তবে চিত্রের বিষয়বস্তু sertোকাতেও এটি ব্যবহার করা যায়।
.my-div:before {
content: url("image.png");
}এর ফলে ডিভটি তার উচ্চতাটিকে চিত্রের প্রকৃত পিক্সেল আকারে আকার দিতে পারে। প্রস্থটিকেও আকার পরিবর্তন করতে, যুক্ত করুন:
.my-div {
display: inline-block;
}আপনি এটি সার্ভারের পাশেই করতে পারেন: চিত্রটি পরিমাপ করে এবং ডিভ আকার নির্ধারণ করে, বা জেএস দিয়ে চিত্রটি লোড করে, এর বৈশিষ্ট্যগুলি পড়ুন এবং তারপরে ডিআইভি আকার নির্ধারণ করুন।
এবং এখানে একটি ধারণা রয়েছে, আইএমজি ট্যাগ হিসাবে ডিভের ভিতরে একই চিত্রটি রাখুন, তবে এটি দৃশ্যমানতা দিন: লুকানো + অবস্থান সম্পর্কিত সাথে খেলুন + এই ডিভটিকে চিত্রটিকে ব্যাকগ্রাউন্ড হিসাবে দিন।
আমি এই সমস্যাটি পেয়েছি এবং হাসনবির উত্তর পেয়েছি তবে প্রশস্ত স্ক্রিনে ব্যাকগ্রাউন্ড চিত্রটি প্রদর্শন করার সময় আমি কিছুটা বাগ পেয়েছি - পটভূমির চিত্রটি পর্দার পুরো প্রস্থে ছড়িয়ে যায় নি।
সুতরাং এখানে আমার সমাধান - হাসানভির কোডের ভিত্তিতে তবে আরও ভাল ... এবং এটি অতিরিক্ত প্রশস্ত এবং মোবাইল উভয় স্ক্রিনে কাজ করা উচিত।
/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}আপনারা যেমন খেয়াল করেছেন, background-size: contain;সম্পত্তি প্রশস্ত ডায়াগুলি অতিরিক্ত প্রশস্ত স্ক্রিনে background-size: cover;ভাল ফিট করে না , এবং সম্পত্তিটি মোবাইলের পর্দায় ভালভাবে খাপ খায় না তাই আমি এই @mediaবৈশিষ্ট্যটি পর্দার আকারগুলি নিয়ে খেলতে এবং এই সমস্যাটি সমাধান করার জন্য ব্যবহার করেছি used
এই সম্পর্কে :)
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}<div class="fixed-centered-covers-entire-page"></div>যদি এটি একক পূর্বনির্ধারিত ব্যাকগ্রাউন্ড ইমেজ হয় এবং আপনি ডিভটি ব্যাকগ্রাউন্ড ইমেজের অনুপাতটি বিকৃতি না করে প্রতিক্রিয়াশীল করতে চান তবে আপনি প্রথমে চিত্রটির অনুপাতের অনুপাতটি গণনা করতে পারেন এবং তারপরে একটি ডিভ তৈরি করতে পারেন যা নীচের মাধ্যমে এটির অনুপাতকে সংরক্ষণ করে :
বলুন আপনি 4/1 এর একটি অনুপাত চান এবং ডিভের প্রস্থ 32%:
div {
width: 32%;
padding-bottom: 8%;
}প্যাডিংগুলি উপাদান যুক্ত উপাদানগুলির প্রস্থের ভিত্তিতে গণনা করা হয় from
এটি হতে পারে এটি সাহায্য করতে পারে, এটি ঠিক পটভূমি নয়, তবে আপনি সহজ ধারণাটি পেয়ে যান
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>আপনি যদি গড়নের সময় চিত্রটির অনুপাতটি জানেন, উইন্ডোর উচ্চতার চেয়ে উচ্চতাটি পছন্দ করুন এবং আপনি আধুনিক ব্রাউজারগুলি (আই 9 +) টার্গেট করছেন তবে আপনি এর জন্য ভিউপোর্ট ইউনিট ব্যবহার করতে পারেন:
.width-ratio-of-height {
overflow-x: scroll;
height: 100vh;
width: 500vh; /* width here is 5x height */
background-image: url("http://placehold.it/5000x1000");
background-size: cover;
}ওপি কী জিজ্ঞাসা করছে তা পুরোপুরি নয়, তবে যারা এই প্রশ্নটি দেখছেন তাদের বেশিরভাগের পক্ষে সম্ভবত বেশ উপযুক্ত, তাই এখানে অন্য বিকল্পটি দিতে চেয়েছিলেন।
আমি কয়েকটি সমাধান দেখেছি এবং সেগুলি দুর্দান্ত তবে আমি মনে করি আমি একটি আশ্চর্যরকম সহজ উপায় খুঁজে পেয়েছি।
প্রথমত, আমাদের পটভূমি চিত্র থেকে অনুপাত পেতে হবে। আমরা কেবল একটি মাত্রা দিয়ে অন্যটির মধ্যে বিভক্ত করি। তারপরে আমরা উদাহরণস্বরূপ .4 66.৪% এর মতো কিছু পাই
যখন আমাদের সাথে চিত্র অনুপাত থাকে আমরা ভিউপোর্টের প্রস্থের সাথে অনুপাতকে গুণ করে ডিভের উচ্চতা গণনা করতে পারি:
height: calc(0.664 * 100vw);আমার কাছে এটি কাজ করে, ডিভ উচ্চতা সঠিকভাবে সেট করে এবং উইন্ডোটি পুনরায় আকার দেওয়ার সময় এটি পরিবর্তন করে।
ধরুন আপনার কাছে এরকম কিছু রয়েছে:
<div class="content">
... // inner HTML
</div>এবং আপনি এটিতে একটি পটভূমি যুক্ত করতে চান তবে আপনি চিত্রটির মাত্রা জানেন না।
আমারও একই সমস্যা ছিল এবং আমি গ্রিড ব্যবহার করে এটি সমাধান করেছি:
এইচটিএমএল
<div class="outer">
<div class="content">
... // inner HTML
</div>
<img class="background" />
</div>সিএসএস
.outer{
display: grid;
grid-template: auto / auto;
// or you can assign a name for this block
}
.content{
grid-area: 1 / 1 / 2 / 2;
z-index: 2;
}
.background{
grid-area: 1 / 1 / 2 / 2;
z-index: 1;
}z-indexশুধুমাত্র ব্যাকগ্রাউন্ডে চিত্র স্থাপনের জন্য, আপনি অবশ্যই img.backgroundউপরের স্থানটি রাখতে পারেন div.content।
দ্রষ্টব্য : এটি div.contentছবির একই উচ্চতার কারণ হতে পারে , সুতরাং যদি div.contentকোনও শিশু থাকে যা এর উচ্চতা অনুসারে স্থাপন করে তবে আপনি একটি সংখ্যা 'অটো' এর মতো কিছু নয় সেট করতে চাইবেন।
উম্ব্রাকো সিএমএসের সাথে এই সমস্যাটি ছিল এবং এই পরিস্থিতিতে আপনি ডিভের 'স্টাইল' বৈশিষ্ট্যের জন্য এই জাতীয় কিছু ব্যবহার করে চিত্রটি ডিভের সাথে যুক্ত করতে পারেন:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"আমি কিছুক্ষণের জন্য এই সমস্যাটির সাথে ডিল করছি এবং এই সমস্যাটি সমাধান করার জন্য jquery প্লাগইন লেখার সিদ্ধান্ত নিয়েছি। এই প্লাগইনটি "শো-বিজি" শ্রেণি সহ সমস্ত উপাদান খুঁজে পাবে (বা আপনি এটি নিজের নিজস্ব নির্বাচককে পাস করতে পারেন) এবং তাদের পটভূমির চিত্রের মাত্রা গণনা করুন। আপনাকে যা করতে হবে তা হ'ল এই কোডটি অন্তর্ভুক্ত করা উচিত, শ্রেণি = "শো দিয়ে পছন্দসই উপাদানগুলি চিহ্নিত করুন
উপভোগ করুন!
আমি সবচেয়ে ভাল সমাধানটি ভাবতে পারি তা হ'ল শতাংশে আপনার প্রস্থ এবং উচ্চতা উল্লেখ করে। এটি আপনাকে আপনার মনিটরের আকারের উপর নির্ভর করে আপনার স্ক্রিনটি পুনরায় আকার দেওয়ার অনুমতি দেবে। প্রতিক্রিয়াশীল লেআউট এর আরও ..
একটি উদাহরণ জন্য। তোমার আছে
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>এটি সর্বোত্তম বিকল্পটি যদি আপনি একটি প্রতিক্রিয়াশীল বিন্যাস চান, আমি ভাসা সুপারিশ করব না, কিছু ক্ষেত্রে ফ্লোট ব্যবহার করা ঠিক আছে okay তবে বেশিরভাগ ক্ষেত্রে, আমরা ভাসা ব্যবহার করা এড়াতে পারি কারণ আপনি ক্রস ব্রাউজার পরীক্ষা করার সময় এটি বেশ কয়েকটি সংখ্যক জিনিসে প্রভাব ফেলবে।
আশাকরি এটা সাহায্য করবে :)
আপনি এটি করতে জানেন যখন আসলে এটি বেশ সহজ:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>কৌশলটি কেবল আবদ্ধ ডিভকে মাত্রিক মান হিসাবে ব্যাকগ্রাউন্ডের ডাইমেনশনাল মানগুলির (যেমন উদাহরণস্বরূপ, 100% এবং 40vw) সাধারণ ডিভ হিসাবে সেট করা।
আমি jQuery ব্যবহার করে এটি সমাধান করেছি। নতুন সিএসএস বিধি নাগরিকভাবে এই ধরণের আচরণের অনুমতি দেয় না আমি এটি করানোর সর্বোত্তম উপায় find
আপনার ডিভগুলি সেটআপ করুন
আপনার ডিভের নীচে আপনি যে পটভূমিটি ("নায়ক") তে প্রদর্শিত হতে চান এবং তারপরে অভ্যন্তরীণ সামগ্রী / পাঠ্যটি আপনি আপনার পটভূমির চিত্রের উপরে ("অভ্যন্তরীণ") উপরে ওভারলে করতে চান। আপনি (এবং হওয়া উচিত) আপনার নায়ক শ্রেণিতে ইনলাইন শৈলীগুলি স্থানান্তর করতে পারেন। আমি এগুলি এখানে রেখেছি যাতে এটিতে কী স্টাইল প্রয়োগ করা হয় তা তাড়াতাড়ি এবং সহজ।
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>চিত্রের অনুপাতের গণনা করুন
এর পরে আপনার চিত্রের উচ্চতা প্রস্থ দ্বারা ভাগ করে আপনার চিত্রের জন্য আপনার অনুপাতের অনুপাতটি গণনা করুন। উদাহরণস্বরূপ, যদি আপনার চিত্রের উচ্চতা 660 হয় এবং প্রস্থটি 1280 হয় তবে আপনার দিকের অনুপাত 0.5156।
উচ্চতা সামঞ্জস্য করতে একটি jQuery উইন্ডো আকার পরিবর্তন ইভেন্ট সেটআপ করুন
অবশেষে, উইন্ডো আকার পরিবর্তন করতে একটি jQuery ইভেন্ট শ্রোতার যোগ করুন এবং তারপরে অনুপাতের তুলনায় আপনার নায়ক ডিভের উচ্চতা গণনা করুন এবং আপডেট করুন। অনুপাতটি অনুপাত ব্যবহার করে অসম্পূর্ণ গণনার কারণে এই দ্রবণটি সাধারণত নীচে একটি অতিরিক্ত পিক্সেল ফেলে রাখে যাতে আমরা ফলাফলের আকারে একটি -1 যুক্ত করি।
$(window).on("resize", function ()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}নিশ্চিত করুন এটি পৃষ্ঠা লোডে কাজ করে
যখন পৃষ্ঠাটি শুরুতে চিত্রের আকারগুলি গণনা করতে লোড হয় তখন আপনার উপরের পুনরায় আকারের কলটি করা উচিত। যদি আপনি এটি না করেন তবে আপনি উইন্ডোর আকার পরিবর্তন না করা পর্যন্ত নায়ক ডিভ সামঞ্জস্য করতে পারবেন না। পুনরায় আকার সমন্বয় করতে আমি একটি পৃথক ফাংশন সেটআপ করি। আমি ব্যবহার করি এমন পুরো কোডটি এখানে।
function updateHeroDiv()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
$(document).ready(function()
{
// calls the function on page load
updateHeroDiv();
// calls the function on window resize
$(window).on("resize", function ()
{
updateHeroDiv();
}
});যদি আপনি ফটোশপে এমন একটি চিত্র তৈরি করতে পারেন যেখানে মূল স্তরটির 1 বা তার বেশি অস্বচ্ছতা থাকে এবং মূলত স্বচ্ছ হয় তবে সেই ইমগটি ডিভের মধ্যে রাখুন এবং তারপরে আসল চিত্রটিকে ব্যাকগ্রাউন্ডের চিত্র তৈরি করুন। তারপরে ইমগের অস্বচ্ছতাটি 1 এ সেট করে এবং আপনি যে আকারের আকার চান তা যুক্ত করুন।
সেই চিত্রটি সেভাবেই করা হয়েছে, এবং আপনি অদৃশ্য চিত্রটি পৃষ্ঠার বাইরেও টানতে পারবেন না যা দুর্দান্ত।
শুধু যোগ করুন div
style="overflow:hidden;"