फिट पृष्ठभूमि छवि को div

Question

मेरी निम्नलिखित पृष्ठभूमि में पृष्ठभूमि छवि है, लेकिन छवि कट जाती है:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

क्या पृष्ठभूमि की छवि को काटे बिना दिखाने का कोई तरीका है?

Comments

क्या छवि डिव से बड़ी है?

— grc

हां छवि div से बड़ी है

— राजीव

पृष्ठभूमि छवि: यूआरएल (/media/img_1_bg.jpg); पृष्ठभूमि-आकार: समाहित; पृष्ठभूमि दोहराने: नहीं दोहराने;

— वारुना मंजुला

Answer 1

आप इसे background-sizeसंपत्ति के साथ प्राप्त कर सकते हैं, जो अब अधिकांश ब्राउज़रों द्वारा समर्थित है ।

Div के अंदर फिट होने के लिए बैकग्राउंड इमेज को स्केल करने के लिए:

background-size: contain;

पूरे डिव को कवर करने के लिए पृष्ठभूमि छवि को स्केल करने के लिए:

background-size: cover;

JSFiddle उदाहरण

IE 5.5+ समर्थन के लिए एक फिल्टर भी मौजूद है , साथ ही कुछ पुराने ब्राउज़रों के लिए विक्रेता उपसर्ग भी ।

Answer 2

अगर आपको जिस चीज की जरूरत है, वह है कि div के समान आयाम हैं, तो मुझे लगता है कि यह सबसे सुंदर समाधान है:

background-size: 100% 100%;

यदि नहीं, तो @grc का उत्तर सबसे उपयुक्त है।

स्रोत: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Comments

अंत में मुझे बैकग्राउंड के साथ पूरी डिव फिट करने का उपाय मिला। धन्यवाद!

— कामिल रायकोवस्की

लेकिन यह छवि को बढ़ाएगा ... क्या पृष्ठभूमि छवि को बिना खींचे फिट करने का कोई तरीका है?

— जुनैद

हालांकि पहलू अनुपात खो गया।

— लर्नर

@ Learner यदि आप छवि के आयामों को बदलते हैं तो छवि को क्रॉप किए बिना पहलू अनुपात 99% खो जाएगा। यह सामान्य ज्ञान है।

— वैभव विशाल

Answer 3

आप इस विशेषता का उपयोग कर सकते हैं:

background-size: contain;
background-repeat: no-repeat;

और आप कोड इस प्रकार है:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

Answer 4

आप भी इसका उपयोग करें:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%; 

मुझे आपके तलाक-मूल्यों का पता नहीं है, लेकिन मान लीजिए कि आप उन लोगों से मिल गए हैं।

height: auto;
max-width: 600px;

फिर, वे सिर्फ यादृच्छिक संख्याएँ हैं। यह पृष्ठभूमि के लिए एक निश्चित चौड़ाई के साथ पृष्ठभूमि-छवि (यदि आप चाहें तो) बनाने में काफी कठिन हो सकता है, इसलिए बेहतर होगा कि अधिकतम-चौड़ाई का उपयोग करें। और वास्तव में एक पृष्ठभूमि-छवि के साथ एक div को भरना जटिल नहीं है, बस सुनिश्चित करें कि आप मूल तत्व को सही तरीके से स्टाइल करते हैं, इसलिए छवि में एक जगह है जिसमें यह जा सकता है।

क्रिस

Comments

एक अत्यधिक मतदान जवाब से लिंक करें जो इस समाधान के बारे में अधिक विस्तार से बात करता है: stackoverflow.com/questions/600743/… और आपको दिखाता है कि गणना कैसे करें padding-top।

— जॉन ली