为什么我不能在 CSS 中调整此图片的大小？

Question

我希望能够调整徽标图像的大小并使其居中（预览时它目前占据了整个页面），但我尝试了很多不同的调整大小的方法，包括将显示：块添加到 CSS 什么都没有发生。我错过了什么？？

除了 HTML 文件的标准开头外，这是我 HTML 文件中的所有内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Home Page</title>
</head>
<body>

<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>

<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>


</body>
</html>

这是我 css 文件中唯一的东西：

body {
margin: 0 auto;
}

.logo {
max-width: 200px;
max-height: 200px;
}

.button {
border: 3px solid green;
}

Answer 1

后面的区域很少例如

您没有 link css 文件与 html 文件。
您的徽标尺寸可能小于最大尺寸

但作为解决方案，我建议您使用 img 中的 css 作为临时解决方案

像这样尝试改变这个

<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">

也可以使用

body{
background-color:red; 
}

您可以检查您的 css 文件是否 linked 还要检查控制台错误

Answer 2

先生，这是最终答案先生，您已经将 class 标志给了而不是 img 所以你已经将 class 添加到 img 而不是

如果css你刚刚这样做

<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">

这里是css

.logo img {
max-width:20px;
}

这会起作用

为什么我不能在 CSS 中调整此图片的大小？

Why can't I size this image in CSS?

html

css

image

resize