我知道有很多关于图像标题的话题；但我检查了其中的大部分，但他们帮不了我。
这是我的问题:我有一张图片想用作标题。我终于找到了放置它的方法，但随后它以其原始大小显示。我尝试了 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/