html - 我正在尝试调整我的图像大小以适合我的导航栏正上方所以它不是那么大？

Question

所以首先我在做 freecodecamp，这是我正在研究的 Pen 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 */

}

这将更改每个纵向视口(viewport)的特定 CSS。例如，这包括手机和平板电脑，还包括调整为纵向的桌面浏览器窗口!