02_size_css.html

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Size with CSS</title>

<style>
  body {
    font-size: 1em;
  }

  img {
    width: 30rem;
    /* height: 50vh; */
  }
</style>

<h1><code>02_size_css.html</code></h1>

<img
  src="i/elmer/800x400.png"
  alt="a colourful test image.">


<p>By default, images are displayed at their full resolution and size.  They can be resized using CSS, for example, this page uses a CSS rule that styles all elements that use the <code>IMG</code> tag.</p>

<h1>Experiment</h1>

<ul>
  <li>Notice that the <code>img</code> element contains <em>no</em> styling instructions.</li>
  <li>What happens when both <code>width</code> and <code>height</code> CSS properties are used simultaneously? Does this image look 'right'?</li>
  <li>What happens if a second image is added to the page?  Are both images formatted the same?</li>
  <li>What happens if the <code>font-size</code> in the <code>body</code> rule is chanegd to <code>2em</code>, <code>3em</code> or larger?</li>
  <li>What alternative sizing units are there?
    <ul>
      <li>What about <code>%</code>, <code>em</code> or <code>vmin</code>?</li>
      <li>Try <code>15em</code> and <code>100vw</code></li>
      <li>When <code>img</code> width is not defined using <code>em</code><em>s</em> what happens to the image if you change the size of the <code>font-size</code> in the <code>body</code> rule?</li>
    </ul>
  </li>
</ul>