सीएसएस

Question

में छवि चौड़ाई के साथ पहलू अनुपात रखें, क्या सीएसएस का उपयोग करके छोटी चौड़ाई वाली छवियों के पहलू अनुपात को ठीक करने का कोई तरीका है? शायद jQuery/जावास्क्रिप्ट का उपयोग करके?

धन्यवाद!

Answer 1

सादे सीएसएस के साथ

, आप auto के रूप में छवियों का केवल एक आयाम है, या तो width या height सेट और सेट कर सकते हैं अन्य, जैसे:

.thumb { 
    width:200px; 
    height:auto; 
} 

छवियों एक निश्चित 200px चौड़ाई, और ऊंचाई होगा पहलू अनुपात पर निर्भर करेगा।

Answer 2

यहाँ jQuery समाधान है;)

function fixImage(elm) { 
      elm = $(elm); 
      var x = elm[0]; 

      var allowedHeight = 80; 
      var allowedWidth = 80; 
      if (width > height) { 
       elm.css('width', allowedWidth + 'px'); 
       elm.css('height', 'auto'); 
      } 
      else { 

       elm.css('height', allowedHeight + 'px'); 
       elm.css('width', 'auto'); 

      } 
}