मैं एक div के अंदर एक छवि का आकार बदल सकता हूं जो मूल div के प्रतिशत का आकार बदल रहा है?

छवि अपने पूर्ण आकार में बनी हुई है और मुझे इसे अपने div के अंदर फिट करने की आवश्यकता है।

मैं यह भी जानना चाहूंगा कि मैं माता-पिता के अंदर 2 divs पक्ष को अपनी स्थिति बनाए रखने के लिए कैसे सेट कर सकता हूं।

यहाँ हैं:

एचटीएमएल


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="test">
    <div id="test2">
        <div id="test3">
               <div id="image">
               </div>
        </div>
    </div>
</div>
</body>
</html>

सीएसएस

body{
background:#999;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#test{
width:90%;
height:90%;
background:#1d2122;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test2{
width:90%;
height:90%;
background:#3F0;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;
}
#test3{
float:left;
width:90%;
height:90%;
background:#F00;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

#image{
float:left;
width:90%;
height:90%;
background:#F00;
background-size:100%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
0

1 उत्तर

Change your CSS selector from #image to #image img

Example: http://jsfiddle.net/justincook/XFV5N/

समस्या यह थी कि आप छवि के चारों ओर div का आकार बदल रहे थे, न कि छवि स्वयं। अपने सीएसएस को img टैग शैली को स्टाइल करने के लिए आप समस्या को हल करते हैं।

To set div's next to eachother, you can set them each as display:inline; width:50% or float:left; width:50%

Read more about float/inline: float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

0
जोड़ा
छवि की ऊंचाई को ऑटो में बदलें और चौड़ाई को प्रतिशत के रूप में रखें और इसे छवि के मूल अनुपात से मेल खाने के लिए स्वतः-स्केल करना चाहिए, इसलिए #image img {height: auto; }
जोड़ा लेखक Justin, स्रोत
मुझे यकीन नहीं है कि आप वास्तव में क्या पूछ रहे हैं लेकिन उत्तर कुछ आयामों पर कुछ चौड़ाई को स्नैप करने के लिए मीडिया प्रश्नों का उपयोग कर सकता है। जब आप अपनी पोस्ट संपादित करते हैं, तो टूलबार में एक छवि को शामिल करने के लिए आपको एक विकल्प देखना चाहिए, यदि नहीं, तो StackOverflow ने नए उपयोगकर्ताओं को स्पैम को रोकने के लिए अक्षम कर दिया होगा।
जोड़ा लेखक Justin, स्रोत
महान आदमी, जिसने यह किया और मैंने अभी सीखा है कि मैं नहीं चाहता कि छवि खिड़की के आकार का अंधाधुंध पालन करे, लेकिन खिड़की के साथ विस्तार और सिकुड़ते समय 720 या 1080 आकार अनुपात प्रदर्शित करने के बजाय (जैसे वीएलसी वीडियो प्लेयर करता है क्योंकि एक विंडो को आकार देता है) सामग्री को विकृत नहीं करने के लिए। मैं अनुमान लगा रहा हूं कि यदि मैं पहली "div परत" पर एक नियम लागू करता हूं और बाद के लोगों को इसके प्रतिशत पर रखता हूं, तो यह हमेशा छवियों की अखंडता को बनाए रखेगा। तुम क्या सोचते हो?
जोड़ा लेखक SurvMach, स्रोत
जस्टिन, मैंने #image img लागू किया {ऊंचाई: ऑटो; } सीएसएस में, छवि आकार बदलने के दौरान अनुपात रखती है लेकिन जिस div में यह है, वह खिड़की के ऊपर और नीचे अपने ऊर्ध्वाधर सिरों को लाता है और पक्षों पर 90% रखता है। मुझे वास्तव में क्या चाहिए कि बच्चे divs के लिए असाइन प्रतिशत पर अपनी ऊंचाई और चौड़ाई रखने के लिए है और इसलिए उनके पक्ष अनुपात को बनाए रखने के बाद से उनके पक्ष अनुपात बनाए रखें। अगर केवल छवि का पालन करता है तो मैं पूरी साइट को एकसाथ आकार देने में सक्षम नहीं होगा। सहायता का शुक्रिया। मैं प्रश्न पर jpegs कैसे रखूं? मेरा मानना ​​है कि अगर मैं समझा सकता हूं तो आप इसे बेहतर तरीके से प्राप्त कर
जोड़ा लेखक SurvMach, स्रोत