Css 使切片图像具有响应性？

我尝试过各种方法来解决这个问题

我们使用的是flash/html5音乐播放器，嵌套在由图像片段组成的图形设计中，可创建一个约为

500 x 300px的“播放器”：

这里有一些文字

    <div id="Major_Glitch_Table">
      <div id="This-Our-Image-01">
        <img src="static/img/This-Our-Image_01.png" width="506" height="122" alt="" />
      </div>

      <div id="This-Our-Image-02">
        <img src="static/img/This-Our-Image_02.png" width="104" height="126" alt="" />
      </div>

      <div id="This-Our-Image-03">
        <!-- start player -->

        <div class="sm2-bar-ui compact">
          <!-- SoundManager2 html5/flash music player here -->
        </div>
        <!-- end player  -->
      </div>

      <div id="This-Our-Image-04">
        <img src="static/img/This-Our-Image_04.png" width="102" height="126" alt="" />
      </div>

      <div id="This-Our-Image-05">
        <img src="static/img/This-Our-Image_05.png" width="300" height="96" alt="" />
      </div>
    </div>

CSS：

#Major_Glitch_Table {
    position:relative;
    left:0px;
    top:0px;
    width:506px;
    height:248px;
}

#This-Our-Image-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:506px;
    height:122px;
}

#This-Our-Image-02 {
    position:absolute;
    left:0px;
    top:122px;
    width:104px;
    height:126px;
}

#This-Our-Image-03 {
    position:absolute;
    left:104px;
    top:122px;
    width:300px;
    height:30px;
}

#This-Our-Image-04 {
    position:absolute;
    left:404px;
    top:122px;
    width:102px;
    height:126px;
}

#This-Our-Image-05 {
    position:absolute;
    left:104px;
    top:152px;
    width:300px;
    height:96px;
}

我知道常用的方法是应用于图像或div：

max-width:90%;
height:auto;

但是，根据大小比例，较小切片的百分比会被设置为较小的百分比吗

现在我想知道是否有任何理由不干脆放弃所有的切片，只是使用整个图形作为包含播放器的div的背景图像

然后使用
背景尺寸：封面
在div和球员身上都有一个
最大尺寸
。
我认为你的假设是正确的。使用一个图像会更容易。它确实取决于您如何在上面加载控件。如果看不见，就很难评估。你为什么还要剪切一张300x500的图片？你拼错了网站名称，我想我纠正了拼写后，我不知道剪切的图片在哪里。在任何情况下，听起来你应该摆脱图像切片。我删除了评论，因为我并不真的想让url发布。将公布最终方法，以防任何搜索者采用同样不可取的方法。
max-width:90%;
height:auto;