JSFiddle - React, Tailwind, and code Playground
by David Thomas
HTML
<img src="http://davidrhysthomas.co.uk/img/dexter.png" id="imageToTest" />
CSS
img {
width: 40px;
}
JavaScript
function showNaturalInfo(el) {
if (!el || el.tagName.toLowerCase() !== 'img') {
return false;
}
else {
var w = el.naturalWidth,
h = el.naturalHeight,
D = document,
details = D.createElement('span'),
detailsText = D.createTextNode('Natural width: ' + w + 'px; natural height: ' + h + 'px.');
details.appendChild(detailsText);
el.title = 'Natural width: ' + w + 'px; natural height: ' + h + 'px.';
el.parentNode.insertBefore(details, el.nextSibling);
}
}
var imgs = document.getElementsByTagName('img');
for (var i = 0, len = imgs.length; i < len; i++) {
showNaturalInfo(imgs[i]);
}