छवि चौड़ाई/ऊंचाई संक्रमण काम नहीं कर रहा

Question

किसी छवि को बड़ा करते समय संक्रमण का उपयोग क्रोम में काम नहीं करता है।

HTML:

<img src="foobar.png"> 

सीएसएस:

 img 
     { 
      float: left; 
      margin-right: 10px; 
      border-radius: 10px; 
      width: 200px; 
      -webkit-transition: width 1s ease, height 1s ease; 
     } 
     img:hover 
     { 
      width: 100%; 
     } 

फिडल: http://jsfiddle.net/6Dk4D/

क्या गलत है?

Answer 1

यह ऐसा लगता है कि प्रतिशत के साथ काम नहीं करेगा। साथ ही, यदि आप height को भी संक्रमण करना चाहते हैं, तो आपको इसे orignal img स्टाइल में घोषित करने की आवश्यकता है। यहां दिखाया गया: http://jsfiddle.net/Skooljester/6Dk4D/1/ यह काम करता है यदि आप होवर के लिए width पिक्सल में निर्दिष्ट करते हैं।

संपादित करें: यदि आप प्रतिशत के रूप में पहले width निर्दिष्ट करते हैं तो दूसरा प्रतिशत के साथ भी परिभाषित किया जा सकता है और अभी भी काम कर सकता है। धन्यवाद Tyilo

Answer 2

आप max-width चाल का भी उपयोग कर सकते हैं। होवर पर एक उच्च max-width राशि सेट करें और मूल छवि चौड़ाई संक्रमण द्वारा सम्मानित किया जाएगा।

http://codepen.io/rustydev/pen/BKOBNZ