Question

你好我已经建立了一个网站，我的标题调整到屏幕的大小，但标题内的内容没有调整。例如，有一个图像无法自行调整，一旦浏览器窗口调整大小，最终会将标题留在其下面。字体也没有调整。

我已经尝试过min-width和max-width但是它不起作用。我正在使用@media个查询，并想知道是否有使用此查询来使标题内的内容与标题一起调整。

我的<header>风格如下：

header {
    position: relative;
    width: Auto;
    height: 239px;
    background: #FED93F;
}

修改

我所做的是添加一个<header>标签并放置两张图片，并在其中放置一个标题。在标题中，文本不会自我调整。在图像中，第一个图像是徽标，第二个图像是最右侧的图像。徽标位于左侧的某个位置，文本位于其中间。

<header>
<img src="images/Logo_image.png"  style="margin-left:50px; margin-top:50px"/>
<h1>Company name</h1>
<p>Tag Line</p>
<img src="images/side_image.png" style="position: relative; align: right; float:right" />
</header>

当添加所有这些内容时，我希望它将自己调整为窗口的大小，就像主标题一样。但事实并非如此。

文字的CSS：

header h1
{
    font-family: "Arial";
    font-size: 72px;
    color: #6A1111;
    position: absolute;
    left: 212px;
    top: 78px;

}


header p
{
    font-family: "Myriad Pro";
    font-size: 21px;
    color: #404041;
    position:absolute;
    margin: -35px 0 0 250px;
}

Answer 1

试试这个：

header {
    position:relative;
    width: 100%;
    height:239px;
    background:#FED93F;
}
header img {
    width: 100%;
    height: auto;
}

标题内的元素应为100％宽。

Answer 2

你应该这样试试 -

header img {
    max-width: 100%;
}

我希望它会对你有所帮助。

Answer 3

header {
    position:relative;
    width: 100%;
    height:239px;
    background:#FED93F;
}
header img {
    width: 100px; /*Need give fixed width */
    height: auto;
}

使用HTML和CSS调整图像大小

3 个答案: