सीएसएस ऊंचाई प्रतिशत छवि स्केलिंग नहीं

मैं बाईं ओर एक लोगो और दाईं ओर एक नौसेना बार रखने के लिए वेबसाइट का शीर्ष भाग बनाने की कोशिश कर रहा हूं। छवि बड़ी है क्योंकि मुझे बताया गया था कि इसका उपयोग एचडीटीवी पर किया जा सकता है और यह अच्छी तरह से स्केल करना चाहता था। मैंने सोचा कि अगर मैं एक ही div में लोगो और एनएवी बार डालता हूं तो मैं ऊंचाई पर प्रतिशत लागू कर सकता हूं, इसलिए यह हमेशा स्क्रीन का शीर्ष 10% होगा लेकिन यह मेरे कोड के साथ स्केल नहीं करता है, यह बस रहता है एक ही छवि आकार। कोई भी सहायताकाफी प्रशंसनीय होगी।सीएसएस ऊंचाई प्रतिशत छवि स्केलिंग नहीं

<body> 
<div id="container"> 
    <div id="top"> 
    <img src="images/logo.png" alt="logo"> 
    <ul> 
    <li><a href="#" title="1">1</a></li> 
    <li><a href="#" title="2">2</a></li> 
    <li><a href="#" title="3">3</a></li> 
    <li><a href="#" title="4">4</a></li> 
    <li><a href="#" title="5">5</a></li> 
    </ul> 
    </div> 
</div>

और इस का उपयोग करते हुए

#top { 
height: 10%; 
width: 100% 
}

मैं वास्तव में किसी की मदद की सराहना करेंगे सीएसएस im है।

स्रोत

2013-02-21 user2093601

यदि आप छवि को स्केल करने की कोशिश कर रहे हैं, तो आपको अपने सीएसएस में छवि को लक्षित करने की आवश्यकता है।

मैं आपके स्केलिंग के लिए न्यूनतम (और संभवतः अधिकतम) सीमा निर्धारित करने की भी सिफारिश करता हूं। एक बिंदु है जहां छोटे हो जाना बुरा लगेगा और अनुपयोगी हो जाएगा।

html, body, #container { 
    height: 100%; 
    width: 100%; 
} 

#top { 
    height: 10%; 
    width: 100%; 
    min-height: 23px; 
} 

#top img { 
    height: 100%; 
    width: auto; 
    min-height: 23px; 
    min-width: 136px; 
}

jsfiddle

स्रोत

2013-02-21 01:36:17

वास्तव में यह बड़ा बनाने के लिए लगता है यही कारण है, लेकिन कम से कम यह बढ़ाए गए हैं। कोई अन्य विचार? – user2093601

@ user2093601 छवि मेरे [jsfiddle उदाहरण] में 10% फ्रेम के भीतर स्केल (http://jsfiddle.net/JvgtX/show/)। वास्तव में क्या काम नहीं कर रहा है? –

आह क्षमा करें स्टैक ओवरफ्लो में उदाहरण कोड आईएमजी ऊंचाई दिखाता है: 100% 10% नहीं। आपका अधिकार हालांकि, जेएस बेवकूफ उदाहरण आईएमजी तत्व पर लागू 10% ऊंचाई के साथ काम करता है। आईएमजी तत्व माता-पिता शीर्ष div की संपत्ति पर नहीं लेना चाहिए और समायोजित करना चाहिए? यही कहना है कि मैं युक्त div 'top' 10% क्यों नहीं कर पाऊंगा और क्या आईएमजी उस आकार की संपत्ति का वारिस कर सकता है? – user2093601

आप छवि 10% की ऊंचाई देने के लिए इतना है कि यह div के साथ पैमाने पर करने के जानता है की जरूरत है। मुझे विश्वास है कि अगर आप ऐसा करेंगे तो यह काम करेगा।

#top img { 
    height: 10%; 
}

संपादित करें: jsFiddle

स्रोत

2013-02-21 01:40:40

यह इसे स्केल बनाता है। छवि को div की संपत्ति का उत्तराधिकारी नहीं होना चाहिए, इसलिए मैं इसे 100% असाइन कर सकता हूं? – user2093601

यह फ़्लोट किया गया है इसलिए '# टॉप' वास्तव में खाली है (ऊंचाई: 0 पीएक्स) क्योंकि फ्लोट सामान्य प्रवाह से तत्व लेता है। –

यह अनुमान लगा रहा है कि आप निश्चित रूप से '# शीर्ष' की सामग्री को फ़्लोट करना चाहते हैं। –

सीएसएस ऊंचाई प्रतिशत छवि स्केलिंग नहीं

उत्तर

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