जवाबों:
एक और, शायद अक्षम, समाधान एक 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एक यह है कि यह CSS ब्लेंड-मोड्स का उपयोग कर सकती है , जबकि 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) */
}आपको बस ऑटो ऊंचाई के साथ एक पृष्ठभूमि छवि मिली है जो कि एक img तत्व की तरह काम करेगी। यहां एक कार्यशील प्रोटोटाइप है (आप डिविज़न का आकार बदल सकते हैं और जांच सकते हैं): 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 पर सेट कर सकते हैं और position:absolute; top:0; bottom:0; left:0; right:0;सेट के साथ एक और div अंदर रख सकते हैं
CSS का उपयोग करके पृष्ठभूमि छवि आकार के लिए ऑटो समायोजित करने का कोई तरीका नहीं है।
आप सर्वर पर पृष्ठभूमि छवि को मापकर और फिर उन विशेषताओं को div पर लागू कर सकते हैं, जैसा कि अन्य लोगों ने उल्लेख किया है।
आप छवि आकार के आधार पर div का आकार बदलने के लिए कुछ जावास्क्रिप्ट को हैक कर सकते हैं (एक बार छवि डाउनलोड हो जाने के बाद) - यह मूल रूप से एक ही बात है।
यदि आपको छवि को ऑटो-फिट करने के लिए आपके div की आवश्यकता है, तो मैं पूछ सकता हूं कि आपने <img>अपनी div के अंदर एक टैग क्यों नहीं लगाया ?
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;
}मैं छवि के केंद्र में एक div होना चाहता था, और यह मुझे इसकी अनुमति देगा।
एक शुद्ध सीएसएस समाधान है कि अन्य उत्तर छूट गए हैं।
"सामग्री:" संपत्ति का उपयोग ज्यादातर पाठ सामग्री को एक तत्व में सम्मिलित करने के लिए किया जाता है, लेकिन इसका उपयोग छवि सामग्री डालने के लिए भी किया जा सकता है।
.my-div:before {
content: url("image.png");
}यह div को छवि के वास्तविक पिक्सेल आकार में इसकी ऊंचाई का आकार देने का कारण होगा। चौड़ाई का आकार बदलने के लिए, जोड़ें:
.my-div {
display: inline-block;
}आप इसे सर्वर साइड कर सकते हैं: छवि को मापकर और फिर डिव साइज़ को सेट करके, या जेएस के साथ इमेज को लोड कर सकते हैं, इसे पढ़ सकते हैं और फिर DIV आकार सेट कर सकते हैं।
और यहाँ एक विचार है, एक छवि को div के अंदर IMG टैग के रूप में रखें, लेकिन इसे दृश्यता दें: स्थिति के सापेक्ष छिपे + खेलते हैं और इस div को पृष्ठभूमि के रूप में छवि देते हैं।
मेरे पास यह मुद्दा था और हसनवी का जवाब मिला, लेकिन एक विस्तृत स्क्रीन पर पृष्ठभूमि की छवि प्रदर्शित करते समय मुझे थोड़ा बग मिला - पृष्ठभूमि की छवि स्क्रीन की पूरी चौड़ाई में नहीं फैली।
तो यहाँ मेरा समाधान है - हसनवी के कोड पर आधारित लेकिन बेहतर ... और यह दोनों अतिरिक्त-वाइड और मोबाइल स्क्रीन पर काम करना चाहिए।
/*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;प्रॉपर्टी doas अतिरिक्त वाइड स्क्रीन में अच्छी तरह से फिट नहीं होती है, और background-size: cover;संपत्ति मोबाइल स्क्रीन पर अच्छी तरह से फिट नहीं होती है इसलिए मैंने @mediaस्क्रीन साइज के साथ खेलने और इस समस्या को ठीक करने के लिए इस विशेषता का उपयोग किया ।
इस बारे में कैसा है :)
.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>यदि यह एकल पूर्वनिर्धारित पृष्ठभूमि छवि है और आप चाहते हैं कि पृष्ठभूमि की छवि के पहलू अनुपात को विकृत किए बिना div उत्तरदायी हो, तो आप पहले छवि के पहलू अनुपात की गणना कर सकते हैं और फिर एक div बना सकते हैं, जो निम्नलिखित करके यह पहलू अनुपात बनाए रखता है। :
मान लें कि आप 4/1 का पहलू अनुपात चाहते हैं और div की चौड़ाई 32% है:
div {
width: 32%;
padding-bottom: 8%;
}यह इस तथ्य से उत्पन्न होता है कि पैडिंग की गणना युक्त तत्व की चौड़ाई के आधार पर की जाती है।
यह मदद कर सकता है, यह बिल्कुल पृष्ठभूमि नहीं है, लेकिन आपको सरल विचार मिलता है
<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>यदि आप बिल्ड समय में छवि के अनुपात को जानते हैं, तो खिड़की की ऊंचाई के आधार पर ऊंचाई चाहते हैं और आप आधुनिक ब्राउज़रों (IE9 +) को लक्षित कर रहे हैं , तो आप इसके लिए व्यूपोर्ट इकाइयों का उपयोग कर सकते हैं:
.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;
}काफी नहीं ओपी क्या पूछ रहा था, लेकिन शायद इस सवाल को देखने वालों के लिए एक अच्छा फिट है, इसलिए यहां एक और विकल्प देना चाहता था।
मैंने कुछ समाधानों को देखा और वे महान हैं लेकिन मुझे लगता है कि मुझे आश्चर्यजनक रूप से आसान तरीका मिला।
सबसे पहले, हमें पृष्ठभूमि छवि से अनुपात प्राप्त करने की आवश्यकता है। हम बस एक आयाम को दूसरे के माध्यम से विभाजित करते हैं। तब हमें 66.4% उदाहरण के लिए कुछ मिलता है
जब हमारे पास छवि अनुपात होता है तो हम बस व्यूपोर्ट चौड़ाई द्वारा अनुपात को गुणा करके div की ऊंचाई की गणना कर सकते हैं:
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कोई भी बच्चा है, जो इसकी ऊँचाई के अनुसार रखा गया है, तो आप 'ऑटो' जैसी कोई चीज़ नहीं सेट करना चाहते हैं।
Umbraco CMS के साथ यह समस्या थी और इस परिदृश्य में आप div की 'शैली' विशेषता के लिए कुछ इस तरह से छवि को जोड़ सकते हैं:
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>यह सबसे अच्छा विकल्प है यदि आप एक उत्तरदायी लेआउट चाहते हैं, तो मैं फ्लोट की सिफारिश करूंगा, कुछ मामलों में फ्लोट का उपयोग करना ठीक है। लेकिन ज्यादातर मामलों में, हम फ्लोट का उपयोग करने से बचते हैं क्योंकि जब आप क्रॉस-ब्राउज़र परीक्षण कर रहे होते हैं तो यह बहुत सी चीजों को प्रभावित करेगा।
उम्मीद है की यह मदद करेगा :)
वास्तव में यह काफी आसान है जब आप जानते हैं कि यह कैसे करना है:
<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>ट्रिक सिर्फ संलग्न div को एक सामान्य div के रूप में आयामी मानों के साथ सेट करने के लिए है जैसा कि बैकग्राउंड डायमेंशनल मान (इस उदाहरण में, 100% और 40vw)।
मैंने इसे jQuery का उपयोग करके हल किया। जब तक नए सीएसएस नियम इस प्रकार के व्यवहार के लिए अनुमति देते हैं, तब तक मुझे लगता है कि यह इसे करने का सबसे अच्छा तरीका है।
अपने divs सेट करें
नीचे आपकी डिव होती है जिसे आप चाहते हैं कि पृष्ठभूमि ("नायक") दिखाई दे और फिर आप जिस आंतरिक सामग्री / पाठ को अपनी पृष्ठभूमि छवि ("आंतरिक") के ऊपर ओवरले करना चाहते हैं। आप (और) अपने हीरो वर्ग को इनलाइन शैलियों को स्थानांतरित कर सकते हैं। मैंने उन्हें यहाँ छोड़ दिया, इसलिए यह देखना आसान और आसान है कि इसे किस शैली में लागू किया गया है।
<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.5256 है।
ऊंचाई समायोजित करने के लिए jQuery विंडो आकार बदलने वाली घटना को सेट करें
अंत में, विंडो के आकार के लिए एक jQuery इवेंट श्रोता जोड़ें और फिर पहलू अनुपात के आधार पर अपने हीरो div की ऊंचाई की गणना करें और इसे अपडेट करें। यह समाधान आम तौर पर पहलू अनुपात का उपयोग करते हुए अपूर्ण गणना के कारण निचले हिस्से में एक अतिरिक्त पिक्सेल छोड़ता है, इसलिए हम परिणामस्वरूप आकार में -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 या तो की अस्पष्टता है और मूल रूप से पारदर्शी है, तो उस आईजीएम को डिव में डालें और फिर वास्तविक चित्र को पृष्ठभूमि की छवि बनाएं। फिर img की अस्पष्टता को 1 पर सेट करें और अपने इच्छित आकार को जोड़ें।
यह चित्र उस तरह से किया गया है, और आप उस अदृश्य छवि को पृष्ठ से दूर नहीं खींच सकते जो शांत है।