图片标题适合屏幕

我知道有很多关于图片标题的主题;但我检查了他们中的大部分，他们不能帮助我。图片标题适合屏幕

这是我的问题：我有一个图像，我想用作标题。我终于找到了放置它的方式，但随后显示它的原始大小。我试过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 
}

来源

2014-05-08 user3617880

头将是你的身体的宽度，你可以发布你的身体CSS？ –

据我记得，在img标签上的宽度和高度属性不需要px – Huangism

它是否确实保持它的原始大小？因为如果您将边距/填充设置为默认值，它将不会到达页面的边缘 –

目前你的目标的头标记，你需要的目标图像本身。从html中删除宽度和高度属性。您还可以设置一个最大宽度为img标签，如果你需要

目标图像

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

来源

2014-05-08 19:25:37 Huangism

thnx分配伴侣，工作^^ – user3617880

欣赏一个复选标记，如果它的工作 – Huangism

完成，对不起，试图做一个，但它给了我一个错误，不知道复选标记.... – user3617880

图片标题适合屏幕

回答

相关问题