Как можно динамически изменять логотип заголовка?

Question

На самом деле я ничего не знаю о html и css, но у меня есть веб-страница, в которой я могу изменить размер страницы, чтобы приспособиться к размеру разрешения экрана. Я предпочитаю, чтобы размер страницы соответствовал размеру браузера, но к тому моменту, когда я смогу жить с ним.

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

код моего файла КСС:

/* Resets 
--------------------------------------------------------------------------------*/ 

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { 
    margin: 0; 
    padding: 0; 
} 

a img { 
    border: 0; 
    /*NOTA: si se utiliza el width en la imagen se modifica el tamaño de la imagen del logo. 
    Se puede utilizar tanto en porcentaje como en pxels, pero en porcentaje no parece que se modifique, 
    solo si se indica en pixels. 
    ESTO ES UN AÑADIDO propio, no es original de la web.*/ 
    width: 100%; 
    /*@NOTA: eh height modica todas las imágenes del la página.*/ 
    //height: 100px; 
} 

a { 
    color: #6ca9d5; 
    text-decoration: none; 
} 

a:hover { 
    color: #90cbf5; 
} 

/* General Styling and Structure 
--------------------------------------------------------------------------------*/ 

body { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 14px; 
    color: #868686; 
    /*NOTA: el margen es el que se deja entre el borde del navegador y el contenido. Por defecto es 0. 
    El padding es parecido y por defecto también es 0. Aunque se cambia y no hace nada. 
    Se tiene que poner 10px por ejemplo, px para indicar pixels. Si se pone 10% entonces es en porcentaje.*/ 
    margin: 1%; 
    padding: 0; 
    background: #fafafa; 
} 

h2 { 
    font-size: 1.7em; 
    margin: 0; 
    padding: .3em 0; 
    line-height: 1.2; 
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif; 
} 

#content h2 { 
    color: #90cbf5; 
} 

p { 
    font-size: 1em; 
    line-height: 1.5; 
    margin: 0; 
    padding: .5em 0; 
} 

#content p { 
    color: #868686; 
} 

#content abbr { 
    border-bottom: 1px dotted #8f8f8f; 
} 


#header-wrap, 
#main-wrap { 
    background: #fff; 
    /*@PRUEBA el original es el mind-width:1200px 
    width: 100%; 
    //min-width: 1200px; 
    vertical-align: baseline; 
} 


#page { 
    /*@NOTA: esto no deja margen a los lados, si no se indica width, pega todo al máximo de la resolución de pantalla. 
    Por defecto es 0 auto*/ 
    margin: 0 auto; 
    /*@MODIFICACION: este es el valor original. Si se amplia a 1300px por ejemplo ocupa todo el ancho 
    //de pantalla. Si no se pone nada, se pega todo a la pantalla sin márgenes. 
    Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/ 
    /*width: 900px*/ 
    /*@NOTA: si se indica un ancho automático se ajusta también al tamaño de pantalla. 
    Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/ 
    width: 100%; 
} 


#header { 
    padding: 0; 
    margin: 0; 
    /*@PRUEBA*/ 
    width: 2000px; 
} 

.wsite-logo, 
.wsite-logo a { 
    color: #90cbf5; 
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
} 

.wsite-logo, 
.wsite-logo a:hover { 
    color: #90cbf5; 
} 

#logo, 
#logo a { 
    font-size: 36px; 
    color: #90cbf5; 
    font-weight: normal; 
    padding: 0; 
    font-family: "Actor", Arial, Helvetica, sans-serif; 
} 

#header-right a { 
    color: #6ca9d5; 
} 

#header-right a:hover { 
    color: #90cbf5; 
} 

/* Header Area 
-------------------------------------------------------------*/ 

#header { 
    /*El ancho parece que no se ajusta a nada, si se pone muy pequeño el logo se sigue viendo 
    completo*/ 
    width: 100%; 
    /*@NOTA: esto modifica el alto del encabezado, que es dond está el logo.*/ 
    height: 100px; 
} 

#header, 
#header table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

#header td { 
    vertical-align: middle; 
    /*@NOTA: la alineación modifica la posición de la imagen de la cabecera de GTS.*/ 
    text-align: left; 
} 


#logo { 
    /*@NOTA: el padding controla la separación desde la parte superior hasta la imagen del lgo de GTS. 
    El primer número indica el padding desde la parte superior y el segundo desde la izquierda. 
    El padding empieza a contar desde el margen de la página, es por tanto una adición al margen. 
    Se pueden indicar también porcentajes.*/ 
    padding: 0 0; 
    /*@NOTA: la opaciodad se indica con porcetanje. 1 es 100 de opacidad. Se Cambia la opacidad de la imagen 
    del logo de GTS de la cabecera. 
    ESTO ES AÑADIDO, no es original de la web.*/ 
    //Opacity: 0.2; 
} 


#header-right { 
    padding: 0 0 0 10px; 
} 

#header-right table { 
    width: 1px; 
} 

#header-right table, 
#header-right .search, 
#header-right .wsite-search { 
    clear: right; 
    float: right; 
} 

#header-right td { 
    padding: 0; 
} 




/* TOP RIGHT: Phone Number 
--------------------------------------------------------------------------------*/ 
#header-right .phone-number .wsite-text { 
    color: #868686; 
    font-size: 12px; 
    font-weight: normal; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-decoration: none; 
    display: block; 
    white-space: nowrap; 
    margin: 5px 0 5px 15px; 
} 

/* TOP RIGHT: Social Links 
--------------------------------------------------------------------------------*/ 

#header-right .wsite-social { 
    vertical-align: middle; 
    margin: 5px 0 0 10px; 
} 

#header-right .wsite-social-item { 
    width: 12px; 
    height: 12px; 
    margin: 0 0 0 12px; 
} 

#header-right .wsite-social-rss { 
    background: url(rss-h.png) no-repeat; 
} 

#header-right .wsite-social-linkedin { 
    background: url(linkedin-h.png) no-repeat; 
} 

#header-right .wsite-social-facebook { 
    background: url(facebook-h.png) no-repeat; 
} 

#header-right .wsite-social-twitter { 
    background: url(twitter-h.png) no-repeat; 
} 

#header-right .wsite-social-mail { 
    background: url(mail-h.png) no-repeat; 
} 

/* TOP RIGHT: Search Box 
--------------------------------------------------------------------------------*/ 

#header-right .search { 
} 

#header-right .wsite-search { 
    margin: 5px 0 5px 15px; 
    vertical-align: middle; 
} 

#header-right .wsite-search-input { 
    width: 137px; 
    height: 13px; 
    border: none; 
    padding: 8px 8px 6px 8px !important; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #848484; 
    font-size: 12px; 
    background: url(input-bg.png) no-repeat; 
    vertical-align: middle; 
    display: inline-block; 
} 

#header-right .wsite-search-button { 
    position: relative; 
    width: 30px; 
    height: 27px; 
    color: #010101; 
    font-size: 12px; 
    border: none; 
    margin: 0; 
    padding: 0; 
    background: url(submit-bg-blue.png) no-repeat; 
    vertical-align: middle; 
    display: inline-block; 
} 

/* Navigation 
--------------------------------------------------------------------------------*/ 

#topnav { 
    clear: both; 
    margin: 0; 
    overflow: hidden; 
} 

#topnav ul { 
    list-style: none; 
    float: left; 
} 

#topnav ul li { 
    list-style: none; 
    float: left; 
    padding: 0 2px 0 0; 
} 

#topnav a { 
    float: left; 
    display: block; 
    color: #545454; 
    text-decoration: none; 
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif; 
    padding: 10px 15px 11px; 
    font-size: 13px; 
    border: 0; 
    outline: 0; 
    margin: 0; 
    list-style-type: none; 
    text-transform: uppercase; 
    line-height: 1; 
} 

#topnav li#active a, 
#topnav a:hover { 
    color: #545454; 
    background: #e3f3ff; 
    border: 0; 
} 

/****************************** flyout menus ******************************/ 

#wsite-menus .wsite-menu li a { 
    font-family: Tahoma, Geneva, sans-serif; 
    padding: 9px; 
    color: #545454; 
    background: #e3f3ff; 
    border: 0; 
    border-bottom: 1px solid #b6d2e6; 
} 

#wsite-menus .wsite-menu li a:hover { 
    color: #545454; 
    background: #fdfeff; 
} 

/* main */ 

#main { 
} 

#content { 
    min-height: 400px; 
    /*@NOTA: el padding modifica la separación entre las banderas con los idiomas el menú.*/ 
    padding: 30px 0; 
} 

#container { 
    /*width: 920px;*/ 
    width: 1200px; 
    margin: 0 auto; 
} 

/* 
#banner-wrap { 
    border-bottom: 1px solid #d4d4d4; 
    border-top: 1px solid #d4d4d4; 
    background: #f6f6f6; 
    min-width: 920px; 
} 
*/ 

/* 
#banner-bot { 
    background: url(banner-bot.png) left bottom no-repeat; 
    padding-bottom: 14px; 
} 



#banner-top { 
    background: url(banner-top.png) no-repeat; 
    padding-top: 14px; 
} 



#banner-mid { 
    background: url(banner-mid.png) repeat-y; 
    padding: 0 10px; 
    overflow: hidden; 
} 
*/ 

/* 
#banner-outer { 
    border: 6px solid #fff; 
} 
*/ 

/* 
#banner { 
    background: url(banner-top.png) no-repeat; 
    padding-top: 14px; 
    position: relative; 
} 
*/ 

/* PAGE TYPE: banner-tall 
--------------------------------------------------------------------------------*/ 
/* 
.tall-header-page .wsite-header { 
    width: 888px; 
    height: 258px; 
    background: url(banner-tall.jpg) no-repeat; 
} 
*/ 

/* PAGE TYPE: banner-short 
--------------------------------------------------------------------------------*/ 
/* 
.short-header-page .wsite-header { 
    width: 888px; 
    height: 168px; 
    background: url(banner-short.jpg) no-repeat; 
} 
*/ 

.no-header-page #banner-wrap { 
    padding: 8px 0; 
    border-bottom: 1px solid #d4d4d4; 
    border-top: 1px solid #d4d4d4; 
} 

/* 
.no-header-page #banner-bot { 
    display: none; 
} 
*/ 

/* PAGE TYPE: banner-landing 
--------------------------------------------------------------------------------*/ 

.landing-page #banner { 
    border: none; 
    background: none; 
    padding: 0; 
} 

.landing-page #banner-detail { 
    background: #66c9c1; 
} 

#bannerleft { 
    float: left; 
    width: 504px; 
    padding: 0; 
    position: relative; 
} 

/* 
#banner-b { 
    background: url(landing-bnr-mid-03.png) left bottom no-repeat; 
    padding-bottom: 14px; 
} 
*/ 

/* 
#banner-t { 
    background: url(landing-bnr-top.png) no-repeat; 
    padding-top: 14px; 
} 
*/ 

/* 
#banner-m { 
    background: url(landing-bnr-mid.png) repeat-y; 
    padding: 0 10px; 
    overflow: hidden; 
} 
*/ 

#banner-inner { 
    border: 6px solid #fff; 
} 

.landing-page .wsite-header { 
    /*width: 472px;*/ 
    width: 1200px; 
    height: 318px; 
    background: url(banner-landing.jpg) no-repeat; 
} 

#bannerright { 
    float: right; 
    width: 366px; 
    padding: 65px 25px 0 25px; 
} 

#bannerright h2 { 
    color: #90cbf5; 
    font-size: 32px; 
    padding: 0 0 12px 0; 
} 

#bannerright p { 
    color: #868686; 
    font-size: 1.1em; 
    padding-bottom: 25px; 
    margin: 0; 
} 

#bannerright .wsite-button { 
    margin: 0; 
} 

/* PAGE TYPE: splash 
--------------------------------------------------------------------------------*/ 

.splash-page #header { 
    width: 532px; 
} 

.splash-page #banner { 
    width: 527px; 
    height: 161px; 
    padding: 6px 4px 4px 6px; 
    background: url(banner-splash-bg.png) no-repeat; 
} 

.splash-page .wsite-header { 
    width: 515px; 
    height: 149px; 
    background: url(banner-splash.jpg) no-repeat; 
} 

.splash-page #content-container { 
    width: 528px; 
} 

.splash-page #content { 
    width: 528px; 
} 

.splash-page #footer { 
    width: 524px; 
} 

/* Footer 
--------------------------------------------------------------------------------*/ 

#footer-wrap { 
    border-top: 1px solid #dedede; 
    background: #fafafa; 
    min-width: 920px; 
} 

#footer { 
    padding: 40px 0 45px; 
    font-size: 12px; 
    color: #666; 
    font-family: Arial, sans-serif; 
    text-align: right; 
} 

#footer p { 
    color: #666; 
} 

#footer a { 
    color: #919191; 
} 

#footer a:hover { 
    color: #6ca9d5; 
} 

#footer h2 { 
    font-size: 16px; 
    margin: 0 0 2px; 
    padding: .3em 0; 
    line-height: 1.5; 
    color: #414141; 
    font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif; 
    border-bottom:1px solid #ddd; 
} 

#footer span { 
    vertical-align: middle; 
} 

#footer .wsite-social { 
    vertical-align: middle; 
} 

#footer .wsite-social-item { 
    width: 12px; 
    height: 12px; 
    margin-right:6px; 
} 

#footer .wsite-social-rss { 
    background: url(rss.png) no-repeat; 
} 

#footer .wsite-social-linkedin { 
    background: url(linkedin.png) no-repeat; 
} 

#footer .wsite-social-facebook { 
    background: url(facebook.png) no-repeat; 
} 

#footer .wsite-social-twitter { 
    background: url(twitter.png) no-repeat; 
} 

#footer .wsite-social-mail { 
    background: url(mail-h.png) no-repeat; 
} 

.wsite-footer { /* make sure enough space between element footer and attribution */ 
    margin-bottom: 15px; 
} 

/* Form Customization 
--------------------------------------------------------------------------------*/ 

.wsite-form-label { 
    display: inline-block; 
    color: #868686; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 1em; 
    padding: 12px 0 5px 0; 
} 

.form-radio-container { 
    color: #868686; 
    font-size: 14px; 
    font-family: Tahoma, Geneva, sans-serif; 
} 

.wsite-form-input { 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 13px; 
    color: #868686; 
    background: #fff; 
    border: 1px solid #dcdcdc; 
    padding: 8px 4px 5px !important; 
    width: 300px; 
    line-height: 1; /* background:#fff url(field.png) repeat-x; 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
     */ 
} 

.form-select { 
    color: #868686; 
    border: 1px solid #dcdcdc; 
    font-size: 13px; 
    background: #fff; 
    font-family: Tahoma, Geneva, sans-serif; 
    padding: 3px 4px; 
    width: 320px; 
    height: 27px; 
    line-height: 27px; /* 
      background:url#fff (field.png); 
      -webkit-border-radius: 3px; 
      -moz-border-radius: 3px; 
      border-radius: 3px; 
     */ 
} 

/* Footer Form Customization 
--------------------------------------------------------------------------------*/ 

.wsite-form-container { 
    margin-top:0px !important; 
    text-align:left; 
} 

.wsite-footer .wsite-form-label { 
    font-size: 1em; 
    padding: 5px 0 2px 0; 
} 

.wsite-footer .wsite-form-field { 
    width:300px !important; 
} 

.wsite-footer .form-radio-container { 
    font-size:1em; 
} 

.wsite-footer .wsite-form-input { 
    font-size: 1em; 
    width: 100% !important; 
} 

.wsite-footer .form-select { 
    width: 100%; 
} 

/* Buttons 
--------------------------------------------------------------------------------*/ 

/* 
    Buttons are styled with background image sprites. There are 4 unique image files: 
    - small & normal-colored (button_small_grey.png) 
    - large & normal-colored (button_large_grey.png) 
    - small & highlight-colored (button_small_orange.png) 
    - large & highlight-colored (button_large_orange.png) 

    Each of these 4 types of buttons must define a :hover state (when user's mouse is over) 
    as well as an :active state (when the user presses down). 

    Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the 
    image files to understand how the liquid-width nature of these buttons work. 
*/ 

/* small */ 

.wsite-button { 
    color: #333 !important; 
    font-family: Arial, Helvetica, sans-serif; 
    height: 34px; 
    display: inline-block; 
    font-size: 12px; 
    border: none; 
    font-weight: normal; 
    font-size: 13px; 
    text-decoration: none; 
    padding: 0 15px 0 0; 
    background: url(button.png) no-repeat 100% -105px; 
} 

.wsite-button:hover { 
    background-position: 100% -140px; 
} 

.wsite-button:active { 
    background-position: 100% -175px; 
} 

.wsite-button-inner { 
    height: 34px; 
    line-height: 34px; 
    display: block; 
    font-size: 14px; 
    font-weight: normal; 
    border: none; 
    text-decoration: none; 
    padding: 0 10px 0 25px; 
    background: url(button.png) no-repeat 0 0; 
} 

.wsite-button:hover .wsite-button-inner { 
    background-position: 0 -35px; 
} 

.wsite-button:active .wsite-button-inner { 
    background-position: 0 -70px; 
} 

/* large */ 

.wsite-button-large { 
    height: 41px; 
    background: url(button_large.png) no-repeat 100% -126px; 
    padding: 0 15px 0 0; 
} 

.wsite-button-large:hover { 
    background-position: 100% -168px; 
} 

.wsite-button-large:active { 
    background-position: 100% -210px; 
} 

.wsite-button-large .wsite-button-inner { 
    height: 41px; 
    line-height: 41px; 
    padding: 0 10px 0 25px; 
    background: url(button_large.png) no-repeat 0 0; 
} 

.wsite-button-large:hover .wsite-button-inner { 
    background-position: 0 -42px; 
} 

.wsite-button-large:active .wsite-button-inner { 
    background-position: 0 -84px; 
} 

/* highlight */ 

/* 
Making the highlighted versions of the buttons is easy because we just need 
to switch out the background images. This works because the different button 
states (normal, :hover, :active) have their sprite coordinates in the same places. 
*/ 

.wsite-button-large.wsite-button-highlight { 
    background-image: url(button_large_highlight_blue.png); 
} 

.wsite-button-large.wsite-button-highlight .wsite-button-inner { 
    background-image: url(button_large_highlight_blue.png); 
} 

.wsite-button-highlight { 
    color: #fff !important; 
    background-image: url(button_highlight_blue.png); 
} 

.wsite-button-highlight .wsite-button-inner { 
    background-image: url(button_highlight_blue.png); 
} 

И мой HTML-код это:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
</head> 
<body class=' tall-header-page wsite-theme-dark'> 
<div id="header-wrap"> 
    <div id="page"> 
     <div id="header-container"> 
      <table id="header"> 
       <tr> 
        <td id="logo">{logo}</td> 
        <td id="header-right"> 
         <table> 
          <tr> 
           <td class="phone-number">{phone:text}</td> 
           <td class="social">{social}</td> 
          </tr> 
         </table> 
         <div class="search">{search}</div> 
        </td> 
       </tr> 
      </table> 
      <div id="topnav"> 
       {menu} 
       <div style="clear:both"></div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="banner-wrap"> 
    <div id="container"> 
     <div id="banner-bot"> 
      <div id="banner"> 
       <div id="banner-mid"> 
        <div id="banner-outer"> 
         <div class="wsite-header"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="main-wrap"> 
    <div id="page"> 
     <div id="main"> 
      <div id="content">{content}</div> 
     </div> 
    </div> 
</div> 
<div id="footer-wrap"> 
    <div id="page"> 
     <div id="footer">{footer}</div> 
    </div> 
</div> 
</body> 
</html> 

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

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

Спасибо.

Answer 1

Поскольку разрешение/размер браузера зависит от клиента, вы можете решить это на стороне клиента.

Я предлагаю смотреть на JavaScript, как это имеет эти удобные функции (и более):

// Get the page width 
windowWidth = document.body.offsetWidth; 

// Get the page height 
windowHeight = document.body.offsetHeight;