如何動態調整圖像大小 - CSS/HTML

Question

我正在試圖動態調整一個.png圖像的大小，以便將任何文本放在框上。正如您從打印屏幕上看到的那樣，它不會動態調整大小以適應框中的文本。我不知道如何使它工作...該頁面的鏈接在這裏。我嘗試過格式化填充，邊距和添加類和div，但它不起作用。鏈接到網站可以找到here。 所以在

<div id='page' class='container'>問題：

<div id="page-bg1"> 
    <div id="page-bg2"> 
     <div id="page-bg3"> 
     <div id="page" class="container"> 
     <div class="box-style2" id="content"> 
      <h2 class="title">Services</h2> 
      <p>Our experience and business ethics have evolved over several decades of working in the cleaning industry. We understand the importance of supervision, training, communication, and customer satisfaction. The facility types we serve include commercial, healthcare, corporate, education, industrial, manufacturing, and auto dealerships 
      </p> 
      <h2>Building Maintenance Services:</h2> 
      <ul> 
       <li><b>Contract Custodial Cleaning:</b> Outsourcing of custodial cleaning is a way for corporate clients to reduce their direct costs while ensuring that quality control standards are met. We can work within your existing cleaning specifications or custom design a complete program for your nightly cleaning requirements, including all labor, cleaning equipment and complete supervision. Additional value-add features include consumable product inventory control, periodic project cleaning, and quality control site audits. 
       </li> 
       <li><b>Certified Cleanroom Attendant Services: </b> 
      Cleanroom cleaning is a highly-specialized function and critical part of our clients’ quality control standards. We can develop and implement a program that will conform to your protocols. Our Attendants are trained and certified in all areas of contamination control including waste removal, gowning procedures, cleaning techniques and equipment handling. 
       </li> 
      </ul> 
     </div> 
     <div id="sidebar"> 
      <div id="box2" class="box-style2"> 
      <h2 class="title">Specialized Cleaning Services</h2> 
      <ul class="style3"> 
       <li>ESD and composition tile floor refinishing and maintenance</li> 
       <li>Carpet and area rug cleaning</li> 
      <li>Cubicle fabrics partition and upholstery cleaning</li> 
       <li>Kitchen and cafeteria cleaning</li> 
       <li>Window and glass cleaning</li> 
       <li>Wall and ceiling cleaning</li> 
      </ul> 
       </div> 
       <div id="box3" class="box-style2"> 
       <h2 class="title">Additional Services</h2> 
       <ul> 
       <li><a href="#">Post-construction cleanup</a></li> 
      <li>Temporary hourly-rate personnel</li> 
      <li>Matron/day porters</li> 
      <li>Pressure washing</li> 
      <li>Painting</li> 
      <li>Relamping</li> 
      <li>Mold and mildew treatments</li> 
      <li>Fabric and carpet soil protection</li> 
      <li>Carpet deodorizing</li> 
      <li>Floor mat purchase and rental programs</li> 
      <li>Flame retardant applications</li> 
      <li>Static control applications</li> 
      <li>Seasonal school dormitory cleaning</li> 
      </ul> 
     </div> 
     </div> 
     </div> 
    </div> 
</div> 

的CSS是在這裏：

html, body { 
    height: 100%; 
} 

body { 
    margin: 0px; 
    padding: 0px; 
    background: url(palette/png/Background/bg.png) repeat left top; 
    font: 14px/26px "Arvo", Georgia, "Times New Roman", Times, serif; 
    //color: #94856A; 
    color: #0020C2; 
} 
a 
h1, h2, h3 { 
    margin: 0px; 
    padding: 0px; 
    font-family: 'Arvo', serif; 
} 

p, ol, ul { 
    margin-top: 0px; 
} 

strong { 
} 

a { 
    color: #789329; 
} 

a:hover { 
    text-decoration: none; 
} 

a img { 
    border: none; 
} 

img.border { 
} 

img.alignleft { 
    float: left; 
} 

img.alignright { 
    float: right; 
} 

img.aligncenter { 
    margin: 0px auto; 
} 

hr { 
    display: none; 
} 

.image-wrapper { 
    position : relative; 
} 

.scale-image { 
    display : block; 
    width : auto; 
    max-width : 75% ; 
} 
/** WRAPPER */ 

#wrapper { 
    background: url(palette/png/Background/bg.png) repeat left top; 
} 

#main-bg { 
    background: url(palette/png/Background/bg_combined.png) repeat center top; 
} 

.container { 
    width: 1000px; 
    margin: 0px auto; 
} 

.clearfix { 
    clear: both; 
} 

/** HEADER */ 

#header { 
} 

/** LOGO */ 

#logo { 
    height: 183px; 
    background: url(images/fmn_200.jpg) no-repeat center top; 
    text-align: center; 
    text-transform: uppercase; 
} 

#logo h1, #logo p { 
    margin: 0px; 
} 

#logo h1 { 
    padding-top: 107px; 
    letter-spacing: 2px; 
    line-height: 25px; 
    font-size: 25px; 
    color: #FFFFFF; 
} 

#logo h1 a { 
    text-decoration: none; 
    color: #FFFFFF; 
} 

#logo p { 
    padding-top: 15px; 
    letter-spacing: 1px; 
    line-height: 14px; 
    font-size: 14px; 
    color: #776D5C; 
    background: url(image/fmn_200.jpg); 
} 

/** MENU */ 

#menu { 
    height: 100px; 
    background: url(images/crop.png) repeat center top; 
} 

#menu ul { 
    height: 69px; 
    margin: 0px; 
    padding: 31px 0px 0px 0px; 
    list-style: none; 
    line-height: normal; 
    text-align: center; 
} 

#menu li { 
    display: inline; 
} 

#menu a { 
    display: inline-block; 
    margin: 0 30px; 
    text-decoration: none; 
    font-weight: bold; 
    text-transform: uppercase; 
    text-decoration: none; 
    line-height: 68px; 
    font-size: 14px; 
    color: #FFFFFF; 
} 

#menu a:hover { 
    text-decoration: underline; 
} 

/** PAGE */ 

#page-bg1 { 
    overflow: hidden; 
    background: url(palette/png/CBG/cbg_shadow.png) repeat-x left bottom; 
} 

#page-bg2 { 
    background: url(palette/png/CBG/cbg_shadow.png) repeat-y center top; 
} 

#page-bg3 { 
    background: url(palette/png/CBG/cbg_combined.png) repeat center bottom; 
} 

#page { 
    overflow: hidden; 
    padding: 50px 0px 50px 0px; 
} 

.homepage #page { 
    height: auto !important; 
    height: 380px; 
    min-height: 380px; 
} 

/** SLIDERTRON */ 

#slidertron { 
    position: relative; 
    width: 900px; 
    height: 300px; 
    margin: 0px auto; 
} 

#slidertron .viewer { 
    width: 900px; 
    height: 290px; 
    overflow: hidden; 
} 

#slidertron .reel { 
} 

#slidertron .slide { 
    float: left; 
    width: 640px; 
    height: 260px; 
    background: #FFFFFF; 
} 

#slidertron .slide img { 
    padding: 9px; 
    border: 1px solid #E4E2DE; 
} 

#slidertron .indicator { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 16px; 
    cursor: default; 
    user-select: none !important; 
    -khtml-user-select: none !important; 
    -moz-user-select: none !important; 
    -o-user-select: none !important; 
    -webkit-user-select: none !important; 
} 

#slidertron .indicator ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    text-align: center; 
} 

#slidertron .indicator li { 
    display: inline; 
} 

#slidertron .indicator li.active { 
} 

#slidertron .indicator a { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    margin: 0px 3px; 
    background: url(images/slidertron_01.png) no-repeat -16px -258px; 
    text-indent: -9999em; 
} 

#slidertron .indicator li.active a { 
    background-position: 0px -258px; 
} 

#slidertron .navigation a { 
    position: absolute; 
    top: 1px; 
    display: block; 
    width: 125px; 
    height: 258px; 
    background: url(images/slidertron_01.png) no-repeat; 
    text-indent: -9999em; 
} 

#slidertron .navigation a.previous { 
    left: -1px; 
    background-position: 0px 0px; 
} 

#slidertron .navigation a.next { 
    background-position: 100% 0px; 
    right: -1px; 
} 

/** CONTENT */ 

#content { 
    float: left; 
    width: 600px; 
    padding-left: 50px; 
} 

.two-column2 #content { 
    float: right; 
    padding-right: 50px; 
    padding-left: 0px; 
} 

#wide-content { 
    overflow: hidden; 
    padding: 0px 50px; 
} 

/** SIDEBAR */ 

#sidebar { 
    float: right; 
    width: 260px; 
    padding-right: 50px; 
} 

.two-column2 #sidebar { 
    float: left; 
    padding-left: 50px; 
    padding-right: 0px; 
} 

#sidebar .title { 
    font-size: 18px; 
} 

/** FOOTER BLOCK */ 

#footer-block-wrapper { 
    overflow: hidden; 
    padding-bottom: 40px; 
} 

#footer-block-bg { 
    overflow: hidden; 
    padding-bottom: 30px; 
    background: url(palette/png/Background/bg_bar.png) repeat-y center top; 
} 

#footer-block-bgtop { 
    background: url(palette/png/Background/bg_bar.png) no-repeat center top; 
} 

#footer-block { 
    overflow: hidden; 
    width: 860px; 
    height: auto !important; 
    padding: 70px 70px 0px 70px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #6C5F48; 
} 

#footer-block h2 { 
    margin: 0px; 
    padding: 0px 0px 20px 0px; 
    text-transform: uppercase; 
    font-size: 16px; 
    font-weight: bold; 
    color: #FFFFFF; 
} 

#footer-block #column1 { 
    float: left; 
    width: 240px; 
    margin-right: 70px; 
} 

#footer-block #column2 { 
    float: left; 
    width: 240px; 
} 

#footer-block #column3 { 
    float: right; 
    width: 240px; 
} 

/** FOOTER */ 

#footer { 
    padding: 50px 0px 70px 0px; 
} 

#footer p { 
    margin: 0px; 
    padding: 0px 0px 0px 0px; 
    text-align: center; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #2F2518; 
} 

/** BOX 1 */ 

#box1 .title1, #box1 .title2 { 
    text-align: center; 
} 

/** BOX 2 */ 

#box2 { 
    margin-bottom: 30px; 
} 


/** BOX STYLE 1 */ 

.box-style1 { 
} 

.box-style1 .title1 { 
    padding: 0px 0px 5px 0px; 
    text-shadow: 1px 1px 1px #FFFFFF; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 26px; 
    color: #3C3223; 
} 

.box-style1 .title2 { 
    padding: 0px 0px 15px 0px; 
    text-shadow: 1px 1px 1px #FFFFFF; 
    text-transform: uppercase; 
    font-weight: normal; 
    font-size: 15px; 
    color: #8A7C60; 
} 

/** BOX STYLE 2 */ 

.box-style2 { 
} 

.box-style2 .title { 
    padding: 0px 0px 5px 0px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-size: 26px; 
    font-weight: bold; 
    color: #3C3223; 
} 

.box-style2 .byline { 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    font-size: 15px; 
    font-weight: normal; 
    color: #8B806F; 
} 


/** LINK STYLE 1 */ 

.link-style1 { 
    display: inline-block; 
    height: 48px; 
    margin: 9px 0px 0px 0px; 
    background: url(images/bio_2.png) repeat-x left top; 
} 

.link-style1 a { 
    display: inline-block; 
    height: 48px; 
    background: url(images/bio_1.png) no-repeat left top; 
    line-height: 48px; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-family: 'Arvo', serif; 
    font-size: 14px; 
    font-weight: bold; 
    color: #FFFFFF; 
} 

.link-style1 span { 
    display: inline-block; 
    padding: 0px 30px 0px 30px; 
    background: url(images/bio_3.png) no-repeat right top; 
    color: #FFFFF; 
} 

/** LINK STYLE 2 */ 

.link-style2 { 
    display: inline-block; 
    background: url(images/homepage09.gif) no-repeat left 3px; 
    margin-top: 20px; 
    padding-left: 30px; 
    text-decoration: none; 
    color: #9F9788; 
} 

/** LINK STYLE 3 */ 

.link-style3 { 
    background: url(images/homepage10.gif) no-repeat left 2px; 
    padding-left: 30px; 
    text-decoration: none; 
    color: #9F9788; 
} 

/** LIST STYLE 1 */ 

ul.style1 { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 

ul.style1 li { 
} 

ul.style1 a { 
    color: #6C5F48; 
} 

/** LIST STYLE 2 */ 

ul.style2 { 
    margin: 0px 0px 10px 0px; 
    padding: 10px 0px; 
    list-style: none; 
} 

ul.style2 li { 
    float: left; 
    margin-right: 9px; 
} 

/** LIST STYLE 3 */ 

ul.style3 { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px; 
    list-style: none; 
} 

這需要調整大小的圖像是palette/png/CBG/cbg_combined.png和palette/png/CBG/cbg_shadow.png，在申報單#page-bg3提出，#page-bg2和#page-bg1。這是我想根據該框中顯示的div文本調整大小的圖像。 。我還添加了一個截圖，讓你們可以對這個問題有一個概念。

我能做些什麼來使它工作？我只需要這個中央橫幅就可以動態調整大小。 我也加入我怎麼想的頁面截圖，看起來像：

Answer 1

基本上，我已經裁剪你的背景，並在不同的充方式使用它。您可以從以下鏈接獲得的圖像：

#page-bg1
#page-bg2
#page-bg-3

這裏是我的代碼：

#page-bg1 { 
    overflow: hidden; 
    background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined2.png) center; 
} 

#page-bg2 { 
    background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined.png) repeat-y center top; 
} 

#page-bg3 { 
    background: url(https://dl.dropboxusercontent.com/u/23887590/cbg_combined1.png) no-repeat center bottom; 
} 

一點解釋：
#page-bg1爲背景後面，外框。
#page-bg-2是您放置內容的框中的垂直重複背景。
#page-bg-3是一個在內容框底部帶有虛線邊框的背景，它不重複但始終固定在底部。