Control the size of third party script image

Question

I have the following script embedded in my webpage:

<script src="http://www.weatherforecastmap.com/weather2.php?zona=malaysia_kuala-lumpur" ></script>

Given that the script will display an image, and I embed the script in a panel. Is there anyway to make sure that the image script will resize automatically ( so that the image always locates inside the panel) depending on the screen size?

Answer 1

Put that script inside a div with fixed width and style the image as well - i.e.:

<div id="thescript">
  <script src="..."></script>
</div>

Style:

/* CSS */
#thescript{
  width: 200px;
  height: 200px;
  overflow: hidden;
}

/* alternative */
#thescript img{
  width: 200px;
}

On the other hand, if you want to depend on the screen size, then I guess you're searching for a % width instead of fixed pixels.