html - 我正在尝试调整图像大小以使其正好位于导航栏上方，因此它不那么大吗？

所以首先我正在做freecodecamp，这是我正在使用的笔[aa>

如您所见，图像及其周围的空间太大，如何缩小尺寸以使其看起来更好，以及是否有人知道如何使它具有响应能力？

的CSS

#header-img {
display: flex;
height: 100%;
background:black;
}
img {
max-width: 100%;
max-height: 100vh;
margin: auto;
}

最佳答案

您需要向标签添加height属性。

例如：

<img src="https://i.pinimg.com/originals/73/fb/7f/73fb7fb7b9cd1833e16bb4fcef17a962.png"
    alt="Adidas Logo"  height="200">

这样，您可以选择适合自己的特定高度。

至于使其具有响应性，通常是通过将多个媒体查询设置为不同的宽度来完成的，这些媒体查询会在发生故障时更改设计。因此，这通常包括在设计开始崩溃时进行的大量试验。

另外，我经常发现同样有效且简单得多的方法是使用orientation: portrait媒体查询，如下所示：

@media (orientation: portrait) {
  /* CSS that needs to change here */

}

这将以纵向调整每个视口上的特定CSS。例如，这包括电话和平板电脑，还包括桌面浏览器窗口，这些窗口的大小已调整为纵向！

关于html - 我正在尝试调整图像大小以使其正好位于导航栏上方，因此它不那么大吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53805487/