【问题标题】：Image Doesn't Resize for HTML5 Responsive Website图像不会为 HTML5 响应式网站调整大小
【发布时间】：2015-12-22 18:12:17
【问题描述】：

我正在尝试将图像与标题文本结合起来，但图像不会随之调整大小。虽然图像看起来太大并且在我调整浏览器窗口大小时没有调整大小。

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];
}

【问题讨论】：

标签： css html image responsive-design

【解决方案1】：

你用来调整img大小的css：

.image img {
    display: block;
    width: 100%;
}

实际上并没有针对任何东西，因为您没有在 html 中使用类图像。

只需为您的所有图片添加全局样式，以使其具有响应性。

img {
    height: auto;
    max-width: 100%;
}

高度：自动；将保持图像的比例和最大宽度：100%；将图像保持在其父宽度内，但不会将其拉伸到大于其原始宽度。

【讨论】：

我尝试了以下操作： <h1><a href="index.html"><img src="images/Logo.png"> Company Name</a></h1> 建议的全局样式，但没有任何改变。
你把这个css放在哪里？您问题中的 html 甚至没有链接到样式表。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

您正在将 h1 标签与图像结合起来，如下代码所示

<h1><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>

所以最好把类名给 h1 as

<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)

【讨论】：