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

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

You need to add a height attribute to your tag.

For example:

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

This way you can choose a particular height that works for you.

As for making it responsive, this is usually done by setting several media queries at different widths, that change the design when it breaks down. So this usually includes a lot of experimenting with when the design starts to break down.

Alternatively, what I often find just as effective and much simpler, is using the orientation: portrait media query, like so:

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

}

This will change the specific CSS on every viewport in portrait orientation. This includes phones and tablets for example, but also desktop browsers windows that are resized to a portrait orientation!