Scale an image?

Usually, if you're scaling a .png, you want to use specific width and height measurements.

First you need to give your image a class or and ID in your HTML.

<img src="../img/facebook.png" alt="facebook logo" class="social-icon">

Then you can set specific measurements in the CSS:

.social-icon {
  width: 20px;
  height: 20px;
}

Let's say you have an image 400px x 400px.

<img class="my-image" src="my_image.png" />

If you set the image height and width properties to 100px using css, then it will be 16 times smaller (4 times less in each dimension). You must not have width and height attributes on the img element itself*.

.my-image {
  height: 100px;
  width: 100px;
}

You can set percentage values for the dimensions, but these will be relative to the parent of the image, not the image size itself. E.g. if you have your image inside a container, and the container dimensions were 300px x 300px, then setting the height and width of the image to 50% would make the image 100px x 100px.

It's a little more complicated if you want the image to scale automatically. First you need to make sure that the image is in a scalable parent element.

<ul class="art-col">
            <li><h1 class="section-label">Arts!</h1></li>
            <li>
              <img src="../img/marquee.jpg" alt="Tampa Theater marquee" class="marquee">
              <p class="caption">The convenience of a movie theater with the history of an opera house.</p>
            </li>
</ul>

Then you need to make sure that all the images on the page are set to take up 100% of the width of the container they're in.

img, iframe {
  max-width: 100%;
}

Finally, you have to make sure that the container scales. Since the image is confined by the container, it will scale too,

.arts-col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.arts-col li {
  width: 45%;
  margin: 2.5%;
}

Since the picture is in a li that will only be 45% of the screen, and the picture is set to take up 100% of that 45%, the picture will also always take up 45% of the screen.