So ändern Sie die Größe eines Bildes, das von einem API-Aufruf stammt

Ist es möglich, die Größe eines Bildes zu ändern, das von einem API-Aufruf stammt? Ich extrahiere ein Bild aus einer API und versuche, es in ein div auf der Seite einzufügen. Die API ist „NASA-Bild des Tages“ und es ist jeden Tag ein neues Bild von der NASA. Je nach Tag ist das Bild manchmal vertikal und manchmal horizontal. Wie geht man am besten mit dieser Situation um? Ich möchte nicht, dass das Bild das div überschreitet, in dem es sich befindet (40 rem x 40 rem), und im Moment wird das Bild sehr groß auf dem Bildschirm angezeigt und ist überhaupt nicht im div enthalten.

HTML:
<section class="section" id="section--1">
      <div class="section__title">
        <div class="title--info">
          <h2 class="section__description">Image of the day <button>view</button></h2>
          <h3 class="section__header">
            View the "image of the day" taken by NASA satellites in space
          </h3>
        </div>
      </div>
      <div class="parent__el"></div>

        
      <!-- <figure class="space__photo">
        <img src="/img/space.jpg" alt=""/>
      </figure> -->

CSS:

.parent__el {
  height: 40rem;
  width: 40rem;
  margin: 0 auto;
}

JavaScript:

const imageContainer = document.querySelector('.parent__el')

const loadImage = async function() {
    try {
        //  1) loading recipe
        const res = await fetch('https://api.nasa.gov/planetary/apod?api_key=BSw3P3LRHk0brFlI5xMlVkaTdwUZuA3arh0A5ziV');
        const data = await res.json();

        if(!res.ok) throw new Error(`${data.message} (${res.status})`);
      
     
        console.log(data) 

        // 2) rendering recipe
        const markup = `
            <div class="space__photo">
              <img src="${data.url}" alt="" />
            </div>
        `;

        imageContainer.innerHTML = markup;

    } catch(err) {
        alert(err)
    }
    
}

loadImage()