test

by tmtron

HTML

<div>

  <!--

  <img id="htmlImg" src="http://placehold.it/1920x1080" />
  <img id="htmlImg" src="http://placehold.it/360x500" />
  <img id="htmlImg" src="http://placehold.it/120x1080" />
  -->

  <img id="htmlImg" src="http://placehold.it/16x60" />

</div>

CSS

div {
  border: 2px solid red;
  display: inline-block;
}

img {
  min-width: 200px;
  max-width: 100%;
  min-height: 200px;
  max-height: 300px;
}

JavaScript

function imgLoaded(event) {
//	const img = document.getElementById('img');
  const bbox = event.target.getBBox();
	console.log('loaded', bbox.width, bbox.height)
  const img = event.target;
  img.setAttribute("width", "100%");
}