Автоматическое изменение размера баннера в соответствии с различными разрешениями экрана?

Question

У меня есть блог

http://mountaintopchef.blogspot.com/

я хочу, чтобы мой заголовок (баннер) для Авторазмера, чтобы соответствовать различному разрешению экрана. я думаю, что его называют жидким макетом, когда он настраивается на все размеры экрана. Я нашел несколько кодов онлайн, но ни один из них не соответствовал моему коду тем. Его нормально, если он не может заполнить экран до горизонтального конца, но по крайней мере он будет центром.

мои блоги полный HTML http://codeshare.io/pltQg

большое спасибо заранее

Answer 1

Я просто быстро использовал Google Chrome Проверьте элемент, чтобы найти код баннера и все, что я делал, было изменение

<img alt="Mountain Top Chef" height="252px; " id="Header1_headerimg" src="http://3.bp.blogspot.com/-5nGgddhpZl4/VedKBQbgsCI/AAAAAAAAAlQ/40XzdyCllRo/s1600-r/mountain-top-chef-banner%2B.jpg" style="display: block" width="100%; "> 

в

<img alt="Mountain Top Chef" height="252px; " id="Header1_headerimg" src="http://3.bp.blogspot.com/-5nGgddhpZl4/VedKBQbgsCI/AAAAAAAAAlQ/40XzdyCllRo/s1600-r/mountain-top-chef-banner%2B.jpg" style="display: block" width="1264px; "> 

или ea Sier увидеть

width="1264px; 

в

width="100%; 

Answer 2

Я рекомендую вам использовать рамки как bootstrap, и падение класса контейнер жидкости на вашем знамени.

В коде, вы должны включить самозагрузки в yourh голову через CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

И вы бы добавить это к вашему баннерной IMG:

class="container-fluid" 

Ending с:

<img alt="Mountain Top Chef" height="252px; " id="Header1_headerimg" src="http://3.bp.blogspot.com/-5nGgddhpZl4/VedKBQbgsCI/AAAAAAAAAlQ/40XzdyCllRo/s1600-r/mountain-top-chef-banner%2B.jpg" style="display: block" width="1264px; " class="container-fluid"> 

(Я получил код непосредственно со страницы)

Bootstrap tutorial.