我正在尝试将图像与标题文本结合起来，但图像不会随之调整大小。尽管图像看起来太大，并且当我调整浏览器窗口大小时，图像的大小没有调整。
HTML 代码：
公司名称CSS：
.image {
display: inline-block;
outline: 0;
}
.image img {
display: block;
width: 100%;
}
/* Header */
#header {
text-align: center;
}
#header h1 {
color: #252122;
font-weight: 900;
font-size: 2.5em;
letter-spacing: -0.035em;
margin: 0 0 1em 0;
}
我尝试了以下代码：
<h1 id="logo">
<a>Company Name</a>
</h1>
并将以下内容添加到 CSS 文件中：
#logo a {
position:relative;
display:block;
width:[image width];
height:[image height];
}
你用来调整img大小的CSS：
.image img {
display: block;
width: 100%;
}
实际上并没有针对任何目标，因为您没有在 html 中使用类图像。
只需为所有图像添加全局样式即可使其响应。
img {
height: auto;
max-width: 100%;
}
高度：自动；将保持图像的比例和最大宽度：100%；将使图像保持在其父级宽度内，但不会将其拉伸到大于其原始宽度。
Stackoverflow 不允许我发表评论，所以我不得不发布答案。您必须将 CSS 类添加到 HTML 标记中。我用演示创建了一个 Plunker here。我不确定你还需要它做什么。
我使用了你的代码，刚刚添加了一个类：
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header">
<!-- Logo -->
<h1 class="image img"><a href="index.html"><a><img src="http://s24.postimg.org/93e2pe9f9/Data_Center_Watermark.png" alt="Company Logo"> Company Name</a></h1>
您将 h1 标签与图像组合，如下代码
<h1><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>
所以最好将类名指定为 h1
<h1 class="h1-image><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>
因此，要调整图像大小，您只需调用该类并将该标签内的 img 定位为
.h1-image img {
height: 10 rem;
width: 10 rem;
}
这里需要通过查看结果来手动定义高度和宽度。所以响应式的更好的做法是使用 rem 或 %。并实现完全响应式使用
@media only screen and (min-width: screen-size)