调用NASA APOD API获取图片后无法调整尺寸的技术问询

我来帮你搞定这个问题！你遇到的核心问题是你的CSS样式没有作用到图片本身——你只给#content1容器设置了宽度和边距，但容器里的图片并不会自动继承容器的尺寸限制，所以它还是会以原始大小显示。下面给你几个可行的解决方案：

方案1：给容器内的图片添加CSS规则 #

直接用后代选择器选中#content1里的img元素，设置尺寸样式。这样不管后续插入多少张图片，都会自动应用样式：

#content1 {
  margin-left: 5%;
  width: 7%; /* 容器宽度 */
}

/* 新增：针对容器内的图片设置样式 */
#content1 img {
  width: 100%; /* 让图片填满容器宽度 */
  height: auto; /* 自动保持图片比例，避免拉伸变形 */
  /* 如果你想固定最大尺寸，也可以用下面的规则 */
  /* max-width: 100%;
  max-height: 300px; */
}

方案2：插入图片时直接添加内联样式 #

如果你只想针对这一张图片设置样式，可以在插入img标签的时候直接加style属性：

function useApiData(data) {
  document.querySelector("#content1").innerHTML += `<img src="${data.url}" style="width:100%; height:auto;">`;
}

方案3：给图片添加类名，用类选择器设置样式 #

这种方式更灵活，适合需要复用样式的场景：

// 修改插入图片的代码，添加class
function useApiData(data) {
  document.querySelector("#content1").innerHTML += `<img src="${data.url}" class="nasa-apod-img">`;
}

/* 新增类样式 */
.nasa-apod-img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 还可以加其他样式，比如圆角 */
}

为什么之前的样式无效？ #

你之前的CSS只作用于#content1这个div容器，容器的宽度设置不会自动约束内部图片的尺寸——图片默认会以自身的原始宽高显示，除非你明确给图片设置尺寸规则，或者把容器的overflow设为hidden（但这样会裁剪图片，不是缩放）。

内容的提问来源于stack exchange，提问作者AVNEESH RUDRA