Question

我正在尝试动态地将.png图像调整为放在框中的任何文本。正如您从printscreen中看到的那样，它不会动态调整大小以适应框中的文本。我不知道如何使它工作......该页面的链接就在这里。我已经尝试格式化填充，边距并添加类和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，显示在div #page-bg3，#page-bg2和#page-bg1中。这是我想根据该框中显示的div文本调整大小的图像。 enter image description here 。我还添加了一个截图，这样你们就可以了解问题。

我能做些什么才能让它发挥作用？我只需要这个中央横幅即可动态调整大小。我还添加了我希望页面看起来如何的截图： enter image description here

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是内容框底部带有虚线边框的背景，不会重复，但始终固定在底部。

如何动态调整图像大小 - CSS / HTML

1 个答案: