Así que creé un sitio web donde busco una imagen de una API, agregué una clase al div donde se inserta la imagen. Intento diseñar el div en css y no cambia.
¿Cómo puedo modificar el tamaño de la imagen?
aquí está el código:
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>` }Necesitas decirle a la imagen que llene el tamaño del contenedor. Agregue lo siguiente a su CSS
.nasaImage {max-width:100%}y agregue lo siguiente a su JS
<img class="nasaImage" src="${data.photos[counter].img_src}" />