¿Es posible cambiar el tamaño de una imagen proveniente de una llamada API? Estoy extrayendo una imagen de una API e intentando insertarla en un div en la página. La API es la "imagen del día de la NASA" y es una nueva imagen de la NASA cada día. A veces, la imagen es vertical y, a veces, la imagen es horizontal según el día. ¿Cuál es la mejor manera de manejar esta situación? No quiero que la imagen exceda el div en el que se encuentra (40 rem x 40 rem), y en este momento la imagen se muestra muy grande en la pantalla y no está contenida dentro del div en absoluto.
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()También puede intentar configurar la imagen como la imagen de fondo de su contenedor space_photo :
const markup = ` <div class="space__photo" style="background-image: url('${data.url}'); background-size:cover;"> </div> `;Sin embargo, tendría que darle a la clase "space__photo" un tamaño apropiado (alto y ancho 100%, por ejemplo, para que se extienda por toda la longitud de su parent_el)
Dale a tu imagen una identificación, "img". en su parte de representación div, haga esto:
let img = document.getElementById("img") if(img.style.height >= img.style.width) { img.style.height = '40px' } else { img.style.width = '40px' }Esto hace que cuando la imagen sea vertical, la represente con una altura de 40 px. Cuando es horizontal, tiene un ancho de 40px.