圖片標題適合屏幕

我知道有很多關於圖片標題的主題;但我檢查了他們中的大部分，他們不能幫助我。圖片標題適合屏幕

這是我的問題：我有一個圖像，我想用作標題。我終於找到了放置它的方式，但隨後顯示它的原始大小。我試過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

圖片標題適合屏幕

回答

相關問題