object-fit: Erhalten Sie die resultierenden Dimensionen

Question

Wie kann ich mit der neuen CSS-Funktion object-fit auf die resultierenden Dimensionen zugreifen, die der Browser mit JavaScript ausgewählt hat?

Nehmen wir an, foo.jpg ist 100x200 Pixel. Die Browserseite/das Ansichtsfenster ist 400 Pixel breit und 300 Pixel hoch. Dann diesen CSS-Code angegeben:

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

Der Browser nun das Bild auf dem ganz oben mit dem richtigen Seitenverhältnis Dehnung bis auf den Grund im zweiten Quartal von der linken Seite zeigen würde. Dies führt in den Bildabmessungen:

• width: 150px
• Höhe: 300px
• links: 62.5px
• rechts: 212.5px

Was Aufruf JavaScript (jQuery erlaubt) würde mir die Zahlen geben, die ich manuell berechnet habe? (Hinweis: Die CSS-Informationen nicht selbst mit dem JavaScript bekannt sind, wie der Benutzer sie überschreiben könnte und sogar Sachen wie min-width hinzufügen)

mit dem Code zu spielen, ich eine Geige erstellt haben: https://jsfiddle.net/sydeo244/

Answer 1

Dank @bfred ich habe nicht die ursprüngliche Methode zu machen.

Hier ist eine erweiterte (und neu geschriebene) Version von ihm, die auch die object-position Werte berechnet.

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>

Exkurs

Es scheint, dass object-position kann mehr als zwei Werte haben, und wenn, müssen Sie einstellen (oder fügen), welcher Parameter die linke Position zurückkehrt Wert

Answer 2

Es gibt eine NPM-Paket namens intrinsic-scale das für Sie, dass berechnen, aber es unterstützt nicht das Äquivalent von object-position: https://www.npmjs.com/package/intrinsic-scale

Dies ist der gesamte Code:

// 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 
    }; 
} 

Und die Nutzung wäre:

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