CODEWITHSUNDEEP
javascripthtmlcss
Maxator
Maxator

Reputation: 65

change size of a image that's being fetched

So i made a website where i fetch an image from an api, i added a class to the div where the image is being inserted. I try to style the div in css and it doesn't change.

How can i modify the size of the image?

here's the code:

html:

<div class='roverImageStyles' id="roverImage"></div>

javascript


async function getimages() {
  const response = await fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${document.getElementById("dateUserInput").value}&api_key=rwX3pO8mONvdxngtstqSuNfwhrwMoGTy6clxqSnu`)
  const data = await response.json()
  console.log(data)
  console.log(data.photos[counter].img_src) 
document.getElementById('roverImage').innerHTML = 

`<img src="${data.photos[counter].img_src}" /></a>`


}

Upvotes: 1

Views: 569

Answers (1)

Adam
Adam

Reputation: 5909

You need to tell the image to fill the size of the container. Add the following to your CSS

.nasaImage {max-width:100%}

and add the following to your JS

<img class="nasaImage" src="${data.photos[counter].img_src}" />

Upvotes: 1

Related Questions