100% ширина изображения?

Я новичок в веб-дизайне и для класса. Я создаю сайт для ресторана, и я сделал свой макет, но у меня возникла проблема (или, может быть, это невозможно) о том, чтобы мой образ отображался так же, как и в моем макете (изображение следовать)100% ширина изображения?

Вот вершина моего макете

enter image description here

Я хочу иметь заголовок 100% (понял, что из) изображение ширина 100%

изображение 1480x808 и с этим кодом it sta ys 100%, но высота не совпадает с моей следующей секцией (она либо полностью отталкивает ее от страницы, либо в других разрешениях имеет большой белый промежуток между ней и следующей секцией)

Может ли кто-нибудь указать мне правильное направление здесь?

действительно Оценил это

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
<style type="text/css"> 
 
body { 
 
\t margin-left: 0px; 
 
\t margin-top: 0px; 
 
\t margin-right: 0px; 
 
\t margin-bottom: 0px; 
 
} 
 
#header { 
 
\t height: 100px; 
 
\t background-image: url(_images/headerpattern.jpg); 
 
\t background-repeat: repeat; 
 
} 
 
#mainpicture { 
 
\t height: 808px; 
 
\t width: 100%; 
 
\t max-height: 808px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 
#redbar { 
 
\t height: 10px; 
 
\t width: 100%; 
 
\t background-color: #94201f; 
 
} 
 
#slogan { 
 
\t height: 207px; 
 
\t width: 100%; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 
    <div id="header"></div> 
 
    <div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div> 
 
    <div id="redbar"></div> 
 
    <div id="slogan">Content for id "slogan" Goes Here</div> 
 
    <div id="redbar"></div> 
 
    
 
    
 
    
 
</div> 
 
</body> 
 
</html>

источник

2014-12-09 user4340635

На несвязанной ноте , попробуйте использовать #mainpicture img {width: 100%;} вместо встроенного css. Это делает ваш код намного более чистым, когда вы находитесь дальше по линии. –

Также в html5 атрибут width должен быть в пикселях, поэтому это будет недопустимое значение (если вы используете html5) – Pete

спасибо за отзыв, я знаю, что очистка моего кода - это то, что мне нужно для разработки. – user4340635

попробуйте удалить высоту и макс высоты свойства от #mainpicture

Update

Для красной полоской I» d удалите их из разметки и используйте border-bottom на первом изображении и border-bottom на втором

Вот fiddle

источник

2014-12-09 09:03:52 Pixelomo

Я думаю, что сделал то, что искал! Спасибо. Однако теперь по какой-то причине мои «красные» divs не появляются. вот образ того, что я имею в виду (im, используя Dreamweaver). http: //i.imgur.com/iVGrJZj.jpg – user4340635

можете ли вы поместить его в jsfiddle? – nCore

Конечно, я попробую. Никогда не слышал о jsfiddle до этого, но здесь идет http://jsfiddle.net/z1jpdjop/ – user4340635

удалить высоту от #mainpicture. или если вам нужна высота, вы можете попробовать положить изображение в фоне #mainpicture и установить размер фона cover..Leave #mainpicture ДИВ пустой

как

<div id="mainpicture"></div>

Css

#mainpicture { 
    height: 808px; 
    width: 100%; 
    max-height: 808px; 
    margin-left: auto; 
    margin-right: auto; 
    background-image:url(_images/mainpic.jpg); 
    background-position:center top; 
    background-size:cover; 
}

источник

2014-12-09 10:31:18

'background-size: cover' - это путь сюда. – Kroltan

Если вы хотите, чтобы ваша страница была отзывчивой, у вас должны быть некоторые правила.

Вы хотите, чтобы изображение отображалось, а также область лозунга. Но страницу можно увидеть на нескольких устройствах с несколькими размерами.

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

Поместите изображения внутри DIV с относительными размерами ...

источник

2014-12-09 12:35:42 escar

100% ширина изображения?

ответ

Смежные вопросы