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

标签 javascript jquery html css image

我正在尝试将 .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 , 在 div 中呈现 #page-bg3 , #page-bg2和 #page-bg1 .这就是我想根据该框中显示的 div 文本调整大小的图像。 enter image description here .我还添加了一个屏幕截图，以便你们了解问题所在。

我该怎么做才能让它发挥作用？我只需要这个中央横幅就可以动态调整大小。 我还添加了我希望页面看起来像的屏幕截图: enter image description here

最佳答案

基本上，我裁剪了您的背景并以不同的方式使用它。您可以从以下链接获取图像:

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

关于javascript - 如何动态调整图像大小 - CSS/HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21956677/

上一篇：css - 单击打开 div(保持打开状态)

下一篇：html - CSS 绝对位置偶尔不受尊重

相关文章：

javascript - 如何使用 firestore TIMESTAMP 在 JavaScript 中创建时间戳

jquery - 使用HTML5验证时如何绑定(bind)提交事件？

html - 与 Bootstrap 3 重叠的部分

html - CSS/html 弹出窗口，最佳做法是什么？

javascript - 使用 javascript 隐藏 IFRAME 滚动条

javascript - 通过 element.innerHTML ='text' 更改 html 时，它不起作用

javascript - 如何找到两个元素的可见顺序？

javascript - 将字符串格式化为 html Angular 2

javascript - 网页中的标签问题

javascript - 使用 jQuery 交换 div 内容

©2024 IT工具网  联系我们