ऑब्जेक्ट-फिट: परिणामी आयाम प्राप्त करें

Question

नई सीएसएस सुविधा object-fit का उपयोग करते समय, ब्राउज़र द्वारा जावास्क्रिप्ट द्वारा चुने गए परिणामी आयामों को मैं कैसे एक्सेस कर सकता हूं?

तो मान लीजिए foo.jpg 100x200 पिक्सेल है। ब्राउजर पेज/व्यूपोर्ट 400 पीएक्स चौड़ा और 300 पीएक्स उच्च है।

img.foo { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    object-position: 25% 0; 
} 

ब्राउज़र अब सही पहलू राशन बाएं से दूसरी तिमाही पर बहुत नीचे करने के लिए खींच के साथ बहुत शीर्ष पर छवि दिखाएगा: फिर इस सीएसएस कोड दिया। यह उन छवि आयाम में जो परिणाम:

• चौड़ाई: 150px
• ऊंचाई: 300px
• बाईं: 62.5px
• सही: 212.5px

तो क्या JavaScript कॉल (jQuery की अनुमति दी) क्या मुझे उन नंबरों को मैन्युअल रूप से गणना की जाएगी? (नोट: सीएसएस जानकारी खुद को JavaScript द्वारा नहीं जाना जाता है उपयोगकर्ता उन्हें अधिलेखित सकता है और यहां तक ​​कि min-width की तरह सामान जोड़ने)

कोड मैं एक बेला बना लिया है के साथ खेलने के लिए: https://jsfiddle.net/sydeo244/

Answer 1

धन्यवाद @bfred को मैं प्रारंभिक विधि बनाने के लिए नहीं था।

यहां उसका एक विस्तारित (और पुनः लिखा हुआ) संस्करण है, जो object-position मानों की भी गणना करता है।

function getRenderedSize(contains, cWidth, cHeight, width, height, pos){ 
 
    var oRatio = width/height, 
 
     cRatio = cWidth/cHeight; 
 
    return function() { 
 
    if (contains ? (oRatio > cRatio) : (oRatio < cRatio)) { 
 
     this.width = cWidth; 
 
     this.height = cWidth/oRatio; 
 
    } else { 
 
     this.width = cHeight * oRatio; 
 
     this.height = cHeight; 
 
    }  
 
    this.left = (cWidth - this.width)*(pos/100); 
 
    this.right = this.width + this.left; 
 
    return this; 
 
    }.call({}); 
 
} 
 

 
function getImgSizeInfo(img) { 
 
    var pos = window.getComputedStyle(img).getPropertyValue('object-position').split(' '); 
 
    return getRenderedSize(true, 
 
         img.width, 
 
         img.height, 
 
         img.naturalWidth, 
 
         img.naturalHeight, 
 
         parseInt(pos[0])); 
 
} 
 

 
document.querySelector('#foo').addEventListener('load', function(e) { 
 
    console.log(getImgSizeInfo(e.target)); 
 
});

#container { 
 
    width: 400px; 
 
    height: 300px; 
 
    border: 1px solid blue; 
 
} 
 

 
#foo { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: contain; 
 
    object-position: 25% 0; 
 
}

<div id="container"> 
 
    <img id="foo" src="http://dummyimage.com/100x200/000/fff.jpg"/> 
 
</div>

साइड नोट

ऐसा प्रतीत होता है object-position अधिक से अधिक 2 मान हो सकते हैं कि, और समायोजित करने के लिए जब, आप की जरूरत (या जोड़ें) जो पैरामीटर बाईं स्थिति रिटर्न मूल्य

Answer 2

वहाँ एक है NPM पैकेज intrinsic-scale कहा जाता है आप के लिए है कि गणना करेगा कि है, लेकिन यह object-position के बराबर का समर्थन नहीं करता: https://www.npmjs.com/package/intrinsic-scale

इस पूरे कोड है:

// adapted from: https://www.npmjs.com/package/intrinsic-scale 
function getObjectFitSize(contains /* true = contain, false = cover */, containerWidth, containerHeight, width, height){ 
    var doRatio = width/height; 
    var cRatio = containerWidth/containerHeight; 
    var targetWidth = 0; 
    var targetHeight = 0; 
    var test = contains ? (doRatio > cRatio) : (doRatio < cRatio); 

    if (test) { 
     targetWidth = containerWidth; 
     targetHeight = targetWidth/doRatio; 
    } else { 
     targetHeight = containerHeight; 
     targetWidth = targetHeight * doRatio; 
    } 

    return { 
     width: targetWidth, 
     height: targetHeight, 
     x: (containerWidth - targetWidth)/2, 
     y: (containerHeight - targetHeight)/2 
    }; 
} 

और उपयोग होगा:

getObjectFitSize(true, img.width, img.height, img.naturalWidth, img.naturalHeight);