Question

我尝试将图片与标题的文字结合起来，但图片并没有随之调整大小。虽然图像看起来太大了，但在调整浏览器窗口大小时也没有调整大小。

HTML代码：

<head>
    <title>Company Name</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body class="homepage">
    <div id="page-wrapper">
        <!-- Header -->
        <div id="header-wrapper">
            <div id="header">
                <!-- Logo -->
                 <h1><a href="index.html"><a><img src="images/pic01.jpg" alt="Company Logo"> Company Name</a></h1>

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

Answer 1

你用来调整img大小的CSS：

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

实际上并未定位任何内容，因为您不在html中使用类图像。

只需为所有图片添加全局样式即可使其响应。

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

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

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

Answer 3

您正在将 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)

图片没有针对HTML5自适应网站调整大小

3 个答案: