0
171
Viewsobtener el tamaño de la imagen dentro de la etiqueta <img> con ajuste de objeto
¿Cómo puedo obtener el tamaño de una imagen que ya está representada en el navegador, dentro de la <img /> con object-fit: contain la propiedad?
Como puede ver, la etiqueta img se ajusta al 100 % del contenedor, pero la imagen del interior no. Necesito el tamaño de la imagen, no la etiqueta.
naturalWidth clientWidth y width no devuelven el valor deseado
·
Juan Pablo Isaza
3 answers
Answer question0
Puede usar offsetWidth para obtener el width de cualquier elemento
function func() { var imgTag = document.getElementById("imgTag") var demo = document.getElementById("demo") demo.innerHTML = imgTag.offsetWidth } <img src="https://pixy.org/src/477/4774988.jpg" width="200" height="200" id="imgTag" /> <button onclick="func()">Get width</button> <div id="demo"></div>
·
Juan Pablo Isaza
Report
0
Puedes usar window.getComputedStyle()
let para = document.querySelector('p'); let imgWithNoStyle = document.getElementById('noStyle'); let imgWithStyle = document.getElementById('withStyle'); let imgWithNoStyles = window.getComputedStyle(imgWithNoStyle); let imgWithStyles = window.getComputedStyle(imgWithStyle); para.textContent = ` My computed img with no style is: ${imgWithNoStyles.objectFit} ${imgWithNoStyles.width} ${imgWithNoStyles.height} and my computed img with style is: ${imgWithStyles.objectFit} ${imgWithStyles.width} ${imgWithStyles.height} `; .with-style { width: 200px; height: 300px; border: 5px solid black; object-fit: fill; } <p>Hello</p> <img src="https://www.w3schools.com/tags/img_girl.jpg" id="noStyle"> <img src="https://www.w3schools.com/tags/img_girl.jpg" id="withStyle" class="with-style">
·
Juan Pablo Isaza
Report
0
document.querySelector("img").naturalWidth;
·
Juan Pablo Isaza
Report
Answer question