javascript - Media queries for dynamically added images -

i have added images dynamically on page using js code this:

if (doorcount == 1) { $("#doorframe").html('<img src="content/image/door2unopenedlight.jpg" />'); $("#map1").html('<img src="content/image/map2light.jpg" />') } else if (doorcount == 2) { $("#doorframe").html('<img src="content/image/door3unopenedlight.jpg" />'); $("#map1").html('<img src="content/image/map3light.jpg" />') } 

and on.

the #doorframe , #map1 divs have fixed sizes match sizes of jpeg images have right , looks fine on desktop/laptop sized screen. however, want use media queries rendering same page on smaller screens. know how same else on page how go altering size of these dynamically added images scale according screen size?

you can tell images scale width of containing element. e.g.

img {width: 100%;} 

just wrap in media query applies want to.