我正试图调整img的大小，使其刚好位于导航栏上方，这样它就不会那么大了

Question

所以首先我在做freecodecamp，这是我的笔https://codepen.io/chrisalta94/pen/JwdBEq

正如你所看到的，图像和它周围的空间太大了，我该如何缩小尺寸，让它看起来更好，如果有人知道我该如何让它做出反应？

CSS

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

Answer 1

您需要在标记中添加一个高度属性。

例如：

<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。例如，这包括手机和平板电脑，但也包括桌面浏览器窗口，它们的大小调整为纵向！