How do i resize image while keeping height auto?

HTML-CSS
1

Hi, i want to be able to resize my image such that its smaller while maintaining the auto height (for relative resizing purposes). How is it best to do this? 20em was originally what i wanted.

Thanks :slight_smile:

<style>
 
  #main {
    background: white;
    margin: 20px 15px;
    font-family: sans-serif;
  }

  #container {
    background: rgb(218, 218, 223);
    border-radius: 50px;
    padding: 0.5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  #title {
    color: rgb(16, 16, 53);
    text-align: center;
  }

  #image {
    display: block;
    max-width: 100%;
    height: 20em;
    margin: 0 auto;
  }

  #img-caption {
    text-align: center;
    font-size: 0.89rem;
    padding-top: 20px;
  }

  #tribute-info h1 {
    text-align: center;
    padding-top: 10px;
  }

  #tribute-info ul {
    margin: 30px auto;
    display: block;
    max-width: 800px;
    text-align: left;
  }

  #link {
    text-align: center;
    font-weight: bold;
  }
</style>

<html>
  <head>
    <title>
      Einstein
    </title>
  </head>
  <div>
    <body id="main">
      <main id="container">
        <h1 id="title">Norman</h1>
        <div id="img-div">
          <img id="image" src="image/Einstein.jpg" alt="Albert" />
          <p id="img-caption">
            Dr. Norman Borlaug, third from the left, trains biologists in Mexico
            on how to increase wheat yields - part of his life-long war on
            hunger.
          </p>
        </div>
        <section id="tribute-info">
          <h1>Here's a time line of Dr. Borlaug's life:</h1>
          <ul>
            <li>1914 - Born in Cresco, Iowa</li>
            <hr />
            <li>
              1933 - Leaves his family's farm to attend the University of
              Minnesota, thanks to a Depression era program known as the
              "National Youth Administration"
            </li>
            <hr />
            <li>
              1935 - Has to stop school and save up more money. Works in the
              Civilian Conservation Corps, helping starving Americans. "I saw
              how food changed them", he said. "All of this left scars on me."
            </li>
            <hr />
            <li>
              1937 - Finishes university and takes a job in the US Forestry
              Service
            </li>
            <hr />
          </ul>
        </section>
        <p id="link">
          If you have time, you should read more about this incredible human
          being on his
          <a
            id="tribute-link"
            target="_blank"
            href="https://es.wikipedia.org/wiki/Albert_Einstein"
            >Wikipedia entry.</a
          >
        </p>
      </main>
    </body>
  </div>
</html>

image
image1366×768 175 KB

2

I’m not sure I understand what do you mean by auto height, but it sounds like you need following:

img {
  width: 100%;
  object-fit: cover;
}

More on that: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

You normally don’t want to use fixed width/height values for img

3