title: How to scale and center an image and make the space between images proportional
body: <p>First, I apologize; I'm a designer, not a coder. I have to create a webpage to share a logo with clients. I've written something by trial and error that is a little better than good enough, but now I'd like to try and make it better.</p>
  <p>The webpage consists solely of four images. I would like the topmost image to be centered and scaled to fit in the viewer's browser window. I've looked at sample code, and I can't get any of it to work. [Aside: Of the dozen samples I tried, none of them were remotely similar to each other. I'm amazed that there are so many ways to do the same thing—and yet I still couldn't figure it out.]</p>
  <p>It would be great if the solution could fix an small issue I have with the page: The height of the top image scales to 75% of the window height (which fits horizontally 95%. of the time), but when viewed on a tall, narrow screen (like a phone), the right side of the image gets cut off. Is it possible to scale based on whether the window's height or width is smaller?</p>
  <p>Finally, I would like to have space between the images which right now I achieve with padding. However, this means it's a fixed 50px regardless of the size of the images which scale proportionally to the window's width. Is it possible to make the padding 25% to the height of the image?</p>
  <p>Thank you,
  Pete</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Saltwater Logos&lt;/title&gt;
      
      &lt;style&gt;
  html, body {
    height: 100%;
  }
          
  img.icon {
    height: 75vh;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
          
  img.logo {
    height: 90%;
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  &lt;/style&gt;    
  &lt;/head&gt;
      
  &lt;body style=&quot;background-color:black;&quot;&gt;
          &lt;div&gt;
              &lt;img class=&quot;icon&quot; src=&quot;logo/Icon.png&quot; alt=&quot;Icon&quot;&gt;
              &lt;img class=&quot;logo&quot; src=&quot;logo/Positive.jpg&quot; alt=&quot;Positive&quot; align=&quot;center&quot;&gt;
              &lt;img class=&quot;logo&quot; src=&quot;logo/Negative.jpg&quot; alt=&quot;Negative&quot; align=&quot;center&quot;&gt;
              &lt;img class=&quot;logo&quot; src=&quot;logo/BlackWhite.png&quot; alt=&quot;Black &amp; White&quot; align=&quot;center&quot;&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>