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

您需要为标签添加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。例如，这包括手机和平板电脑，还包括桌面浏览器窗口，这些窗口的大小已调整为纵向！