заголовок изображения подходит для экрана

Question

заголовок изображения подходит для экрана

0

Я знаю, что есть много тем о заголовке изображения; но я проверил большинство из них, и они не могли мне помочь.

Это моя проблема: у меня есть образ, который я хочу использовать в качестве заголовка. Наконец я нашел способ разместить его, но потом он показывает его оригинальный размер. Я пробовал 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
}

user3617880 08 май 2014, в 21:47

Источник

0

заголовок будет шириной вашего тела, вы могли бы опубликовать свое тело CSS?
Josef E. 08 май 2014, в 19:20
0

Насколько я помню, атрибуты width и height в теге img не нуждаются в px
Huangism 08 май 2014, в 19:22
0

Это определенно остается в своем первоначальном размере? Потому что, если для полей / отступов задано значение по умолчанию, они не дойдут до краев страницы.
General_Twyckenham 08 май 2014, в 19:22
0

Попробуйте добавить max-width: 100% непосредственно к тегу img в css.
Jakub Kotula 08 май 2014, в 19:23
0

Если изображение не является фактическим содержимым, вы можете использовать свойства background-image CSS background-image для гораздо большего эффекта, а затем использовать width: 100%; без объявленной height , и он будет быстро изменять размер и поддерживать соотношение сторон.
TylerH 08 май 2014, в 19:23
0

Вы должны сделать ширину изображения 100%, тогда она изменит размер с браузером, предполагая, что контейнер на 100%. в настоящее время вы нацеливаетесь на элемент заголовка с помощью css
Huangism 08 май 2014, в 19:24
0

Йозеф Э., я изменил это сейчас
user3617880 08 май 2014, в 19:26
0

Якуб Котула, если я изменю его на max-width: 100%, то позже, когда я добавлю изображение, оно также перейдет на ширину 100%, нет ??
user3617880 08 май 2014, в 19:27
0

спасибо всем за помощь, ответ от хуангизма сработал отлично, ура все
user3617880 08 май 2014, в 19:30

Показать ещё 7 комментариев

Теги:

html

css

html5

1 ответ

Ещё вопросы

заголовок будет шириной вашего тела, вы могли бы опубликовать свое тело CSS?
Насколько я помню, атрибуты width и height в теге img не нуждаются в px
Это определенно остается в своем первоначальном размере? Потому что, если для полей / отступов задано значение по умолчанию, они не дойдут до краев страницы.
Попробуйте добавить max-width: 100% непосредственно к тегу img в css.
Если изображение не является фактическим содержимым, вы можете использовать свойства background-image CSS background-image для гораздо большего эффекта, а затем использовать width: 100%; без объявленной height , и он будет быстро изменять размер и поддерживать соотношение сторон.
Вы должны сделать ширину изображения 100%, тогда она изменит размер с браузером, предполагая, что контейнер на 100%. в настоящее время вы нацеливаетесь на элемент заголовка с помощью css
Якуб Котула, если я изменю его на max-width: 100%, то позже, когда я добавлю изображение, оно также перейдет на ширину 100%, нет ??
спасибо всем за помощь, ответ от хуангизма сработал отлично, ура все

Huangism · Accepted Answer · 2014-05-08T18-22-00.000Z

В настоящее время вы нацеливаете тег заголовка, вам нужно настроить таргетинг на изображение. Удалите атрибут width и height из html. Вы также можете установить максимальную ширину для тега img, если вам нужно

Настроить изображение

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

оцените галочку, если это сработало
сделано, извините, попытался сделать один вверх, но это дало мне ошибку, не знал галочку ....