css HTML5响应式网站的图像无法调整大小

uelo1irk 于 2023-03-14 发布在 HTML5

关注(0)|答案(3)|浏览(271)

我尝试将图片与页眉中的文本合并，但图片无法随之调整大小。虽然图片看起来太大，并且在调整浏览器窗口大小时无法调整大小。
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

来源：https://stackoverflow.com/questions/32773241/image-doesnt-resize-for-html5-responsive-website

3条答案

按热度按时间

xcitsw881#

您用来调整img大小的css：

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

实际上并不针对任何东西，因为你在html中没有使用类图像。
只需添加一个全球性的风格，以所有的形象，使他们的React。

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

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

赞(0）回复(0）举报 2023-03-14

jv4diomz2#

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>

赞(0）回复(0）举报 2023-03-14

zzlelutf3#

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

赞(0）回复(0）举报 2023-03-14

我来回答

css HTML5响应式网站的图像无法调整大小

公司名称

3条答案

相关问题

热门标签

最新问答