gpt4 book ai didi

css - 图片标题适合屏幕

转载 作者:太空宇宙 更新时间:2023-11-04 13:28:20 29 4
gpt4 key购买 nike

我知道有很多关于图像标题的话题;但我检查了其中的大部分,但他们帮不了我。

这是我的问题:我有一张图片想用作标题。我终于找到了放置它的方法,但随后它以其原始大小显示。我尝试了 max-width:100%,但大小没有改变,只是停留在那里。

HTML:

<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>

对于我的 CSS,我有这个:

header#niberus
{
width: 100%;
}

我试图从我的 HTML 文件中删除宽度和高度,但图像仍保持正常大小。当我像现在这样添加宽度和高度时,它会填满屏幕;但当然,当您缩小窗口时,图片不会改变。

这是我的完整 HTML 代码:

<!DOCTYPE HTML> 
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css">
<title>Niberus-gaming</title>
</head>
<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
<div class="hbuttons">

<ul>
<li><a href="niberus.html">-Home-</a></li>
<li><a href="news.html">-News-</a></li>
<li><a href="forum.html">-Forum-</a></li>
<li><a href="upcoming.html">-Upcoming projects-</a></li>
<li><a href="about.html">-About me-</a></li>
<li><a href="contact.html">-Contact-</a></li>
</ul>
</div>
<hr>
<table border="1" cellpadding="5px" cellspacing="10px">
<tr>
<td width="300px"><h1>Under construction</h1></td>
<td width="1300px" ><h1>Under construction</h1></td>
<td width="300px"><h1>Under construction</h1></td>
</tr>
</table>

</body>
</html>

这是我的完整 CSS 代码:

ul.horizontal li{
display:block;
float:left;
padding:0 10px;
width: 150px;
}
header#niberus
{
width: 100%;
}
body
{
background-color:black;
}
h1
{
color: white;
}
table
{
color: white;
text-align: left
}



.hbuttons{
float: left;
width: 100%;
background-color: #00FF00;
overflow:hidden;
position:relative;
}
.hbuttons ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
.hbuttons ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
.hbuttons ul li a {
display:block;
margin:0 0 0 1px;
padding:10px 10px;
font: 30px Impact;
color: white;
text-decoration:none;
line-height:15px
}

最佳答案

目前您定位的是标题标签,您需要定位图像本身。从 html 中删除 width 和 height 属性。如果需要,您还可以为 img 标签设置最大宽度

定位图像

header#niberus {
display: block;
}
header#niberus img {
width: 100%;
max-width: xxxx;
}

关于css - 图片标题适合屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23550687/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com