मैं निम्नलिखित div में एक पृष्ठभूमि छवि है, लेकिन छवि काट हो जाता है:फ़िट पृष्ठभूमि छवि div को
<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">
इसमें काट बिना पृष्ठभूमि छवि दिखाने के लिए एक तरीका है?
आप इसे background-size संपत्ति के साथ प्राप्त कर सकते हैं, जो अब supported by most browsers है।
पृष्ठभूमि छवि पैमाने पर करने के लिए div के अंदर फिट करने के लिए:
background-size: contain;
पृष्ठभूमि छवि पैमाने पर करने के लिए पूरे div कवर करने के लिए:
background-size: cover;
वहाँ भी मौजूद है एक filter for IE 5.5+ support , साथ ही vendor prefixes for some older browsers।
या तो आप अपनी div चौड़ाई और ऊंचाई बदलते हैं या पृष्ठभूमि आकार सेट करते हैं।
आप भी इस का उपयोग करें:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
मैं अपने div-मूल्यों को पता नहीं है, लेकिन मान लें कि आप उन मिल गया है सकते हैं।
height: auto;
max-width: 600px;
फिर, ये केवल यादृच्छिक संख्याएं हैं। div के लिए निश्चित चौड़ाई के साथ पृष्ठभूमि-छवि (यदि आप चाहते हैं) बनाना मुश्किल हो सकता है, तो बेहतर अधिकतम चौड़ाई का उपयोग करें। और वास्तव में पृष्ठभूमि-छवि के साथ एक div को भरना जटिल नहीं है, बस सुनिश्चित करें कि आप मूल तत्व को सही तरीके से शैलीबद्ध करते हैं, इसलिए छवि में एक स्थान है जहां यह जा सकता है।
क्रिस
यदि आप जरूरत छवि div का एक ही आयाम है, मुझे लगता है कि यह सबसे सुरुचिपूर्ण समाधान है:
background-size: 100% 100%;
यदि नहीं, तो @grc द्वारा जवाब है सबसे विनियमित
स्रोत: http://www.w3schools.com/cssref/css3_pr_background-size.asp
वही जो मैं खोज रहा था, धन्यवाद :) –
अंत में मुझे पृष्ठभूमि के साथ पूरे div को फिट करने का समाधान मिला। धन्यवाद! –
मेरे लिए काम किया। धन्यवाद :) –
div से छवि बड़ा है? – grc
हाँ छवि div – Rajeev