एचटीएमएल/सीएसएस - एक कंटेनर की 100% चौड़ाई खींचने के लिए एक छवि कैसे प्राप्त करें, फिर उस पर एक और छवि प्रदर्शित करें?

मैं हेडर के लेआउट को प्राप्त करने के साथ संघर्ष कर रहा हूं जिसमें मुझे एक साथ दिमाग है।एचटीएमएल/सीएसएस - एक कंटेनर की 100% चौड़ाई खींचने के लिए एक छवि कैसे प्राप्त करें, फिर उस पर एक और छवि प्रदर्शित करें?

<div id="header"> 
    <img src="/img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div>

और सीएसएस अब तक::

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 
} 

.headerBg { 

} 

.logo { 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
}

मेरा लक्ष्य क्या है कोशिश कर रहा हूँ, 100 के लिए छवि "headerBg.jpg" प्रदर्शन किया है

यहाँ एचटीएमएल अब तक है div "हेडर" की% चौड़ाई, इसलिए अनिवार्य रूप से यह div की पृष्ठभूमि होगी। फिर "header.png" छवि और div "loginbox" ऊपर "headerBg.jpg" प्रदर्शित करें।

लोगो को बाएं किनारे पर तैरना चाहिए और लॉगिन बॉक्स सीएसएस में बहुत दूर तक चलाया जाना चाहिए।

छवि हटा दिए जाने के साथ, लोगो और div सही ढंग से रखे जाते हैं, लेकिन जब छवि पेश की जाती है तो वे प्रवाह में छवि के बाद दो फ्लोट किए गए आइटम रखे जाते हैं।

मैंने विभिन्न परिवर्धन और पुनर्गठन की कोशिश की है लेकिन कोई भी यह साबित करने के लिए सिद्ध नहीं हुआ है कि मैं उन्हें कैसे चाहता हूं।

मैंने सीएसएस में छवि को हेडर div में पृष्ठभूमि के रूप में जोड़ा है, लेकिन यह इस तरह से 100% तक फैला नहीं है।

क्या कोई इस पर कुछ अंतर्दृष्टि प्रदान करने में सक्षम होगा?

इसके अलावा इस तरह की चीजों को कवर करने वाले किसी भी ट्यूटोरियल मेरे संग्रह में एक बड़ा जोड़ा होगा!

धन्यवाद!

स्रोत

2012-04-14 Craig van Tonder

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
#header { 
    position:relative; 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    position:relative; 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 

} 

.headerBg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

.logo { 
    position:relative; 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
} 
    </style> 
</head> 
<body> 
<div id="header"> 
    <img src="img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div> 

</body> 
</html>

स्रोत

2012-04-14 21:50:49 chadpeppers

धन्यवाद आपके उत्तर के लिए, लेकिन यह मेरे लिए समस्या का समाधान नहीं करता है। मैंने यह कोशिश की है, लेकिन छवि 1084 पीएक्स चौड़ी है, जब डिस्प्ले रेज़ोल्यूशन उस से बड़ा हो जाता है, तो यह कंटेनर की पूरी चौड़ाई नहीं लेता है, इस मामले में 'हेडर' जैसा कि यह मॉनिटर चौड़ाई से मेल खाता है।यह मूल रूप से है कि मैंने इसे खींचने में सक्षम होने के लिए कोड में छवि क्यों चुना है। –

पृष्ठभूमि आकार का उपयोग करें: 100% 100%; – chadpeppers

वह सीएसएस 3 है और बहुत ब्राउज़र अनुकूल नहीं है:/यही कारण है कि मैं बिना इसका उपयोग किए छवि को आकार बदलने का तरीका ढूंढ रहा था। –

बस हेडर पृष्ठभूमि छवि को उस div की वास्तविक पृष्ठभूमि बनाएं। फ्लोट अन्य वस्तुओं को उस स्थिति के रूप में अनदेखा नहीं करता है: पूर्ण करता है।

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
    background: url(headerBg.jpg); 
}

स्रोत

2012-04-14 21:51:26 mxniu

हाय और धन्यवाद, लेकिन यह मुझे एक लोचदार div की चौड़ाई फिट करने के लिए छवि को फैलाने की अनुमति नहीं देता है। –

.header { 
    position: relative; 
} 

.headerBg { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
}

ध्यान दें कि यह छवि को मापना <div> की चौड़ाई फिट करने के लिए होगा; यदि आप केवल क्षैतिज रूप से आकार बदलना चाहते हैं तो आपको ऊंचाई को स्पष्ट रूप से सेट करना चाहिए।

यदि आप केवल छवि को बड़ी विंडो पर स्केल करना चाहते हैं तो आप max-width: 100%; भी आजमा सकते हैं।

स्रोत

2012-04-14 22:22:30 Neil

div कक्षा सेट करें जो कोई अतिरिक्त भाग नहीं दिखाएगा।

div { 
overflow: hidden; 
}

स्रोत

2013-06-17 04:47:47 fahomid

ये सेटिंग्स मेरे लिए एकदम सही काम किया .. यह आकार सभी तस्वीरें के लिए उर तस्वीर होगा ..

#headerBg { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
width: 100%; 
height: 100%;

}

स्रोत

2015-05-04 06:45:27 NICK

-1

अपने सीएसएस में प्रयोग करके देखें:

max-height:100%;

स्रोत

2017-02-22 06:22:29

एचटीएमएल/सीएसएस - एक कंटेनर की 100% चौड़ाई खींचने के लिए एक छवि कैसे प्राप्त करें, फिर उस पर एक और छवि प्रदर्शित करें?

उत्तर

संबंधित मुद्दे