我无法使用此 api 调整图像大小

Question

我正在使用 NASA api，但我无法调整图像大小。它不能使用内部、内联或外部。我能够设置段落和其他元素的样式。 图片存储在 ID content1 中

<h1>
      API Template
    </h1>
    <div id="content1"></div>

    <p>
    <div id="content2">
      

    </div>

下面的代码是获取api的脚本

<script>
      
      
      sendApiRequest()


    //An asynchronous function to fetch data from the API.
    async function sendApiRequest(){
      let API_KEY="mMt3hOGtbFkQeywFo48d1tpQw9rvEclGizRgzhBL"
      let response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}`);
      console.log(response)
      let data = await response.json()
      console.log(data)
      useApiData(data)
    }


    //function that does something with the data received from the API. The name of the function should be customized to whatever you are doing with the data
    function useApiData(data)
    {
  
      document.querySelector("#content1").innerHTML += `<img src="${data.url}">`
    }


    </script>

我无法更改图像..

#content1
{
    margin-left: 5%;
    width: 7%;
}

Answer 1

您的 CSS 定位到 div 容器，而不是图像本身。将您的 CSS 选择器更改为 #content1 img:

#content1 img
{
    margin-left: 5%;
    width: 7%;
}