सीएसएस अधिकतम-चौड़ाई आनुपातिक आकार देने नहीं दे रहा है

Question

मेरे पास एक संकीर्ण दृश्य है कि मैं कुछ HTML डाल रहा हूं। में हर एक बार थोड़ी देर होती है एक छवि है कि बहुत चौड़ा है, तो मैं मूल HTML स्ट्रिंग लपेटकर किया गया है, इस सीएसएस का उपयोग कर इसे नियंत्रण में रखने के लिए:

<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style> 
<div style=\"word-wrap:break-word\"> 
. 
. ...original HTML inside the div wrapper... 
. 
</div> 

लेकिन यह चौड़ाई और ऊंचाई पैमाने पर नहीं है छवियों आनुपातिक रूप से, तो परिणाम एक बहुत विकृत छवि है। क्या मैं कुछ और कर सकता हूं, अधिमानतः सीएसएस या कुछ समान रूप से आसान है?

यह आईओएस एप्लिकेशन में एक वेबव्यू के अंदर एम्बेडेड है। मैं मूल HTML के माध्यम से पार्स कोड लिखना नहीं चाहता हूं और छवियों को देख सकता हूं। मुझे एक साधारण समाधान की आवश्यकता है जो देशी UIView क्लास द्वारा समर्थित विधियों का लाभ उठाती है।

---

अद्यतन:

केली से नीचे जवाब में उदाहरण का उपयोग करना, मुझे लगता है कि समस्या छवियों कि चौड़ाई और ऊंचाई एम्बेडेड है के साथ हो रहा है विशेषताएं:

केली की मिसाल:

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 

संशोधित, पहली छवि लिंक में चौड़ाई और ऊंचाई के साथ संशोधित

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 

दोनों इस सीएसएस का उपयोग कर:

div {width:100px;} 
p{max-width:100%;} 
img{max-width:100%;} 

यह वास्तव में कोई फर्क कंटेनर चौड़ाई विशेषता या सेट नहीं है कि क्या नहीं कर रहा है। मैंने इसे दोनों तरीकों से आजमाया।

वास्तव में, this case (link) में ऐसा लगता है कि छवि पहली बार चौड़ाई और ऊंचाई विशेषताओं द्वारा स्केल की गई है, इसके बाद सीएसएस अधिकतम चौड़ाई द्वारा चौड़ाई को घटाया जा रहा है। यह एक बहुत ही विचित्र प्रभाव का कारण बनता है।

Answer 1

यह वास्तव में आसान है, बस माता-पिता को चौड़ाई जोड़ें।

div 
{ 
    width: 100px; 
} 

Demo here।

Answer 2

मुझे यकीन है कि अगर मैं सही अपने प्रश्न समझ में आ नहीं कर रहा हूँ, लेकिन यहाँ एक विचार है:

http://jsfiddle.net/FyC6r/4/

.mydiv 
{ 
    width:200px; 
    height:150px; 
    border: 1px solid red; 
} 

.mydiv img 
{ 
    width:100%; 
} 

<div class="mydiv"> 
    <img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 

इस तरह से आप एक छवि आनुपातिक आकार बदला होगा dependson क्या आप पहली बार की जरूरत है चौड़ाई या ऊंचाई .. सीएसएस में केवल 100% चौड़ाई छोड़कर इसका मतलब है कि छवि को चौड़ाई और ऊंचाई से विभाजित करने के लिए आकार बदल दिया जाएगा, चौड़ाई के रूप में उसी समय आकार बदल दिया जाएगा ताकि पैमाने का सम्मान किया जा सके।

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

Answer 3

बनाए रखने के लिए सही अनुपात का उपयोग करें:

img { 
    max-width: 100%; 
    height: auto; 
} 

height: auto फिक्स अनुपात।