Question

我已经尝试过各种解决问题的方法。

我们正在使用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>

Some More Text

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和播放器上使用background-size: cover; max-size。

制作切片图像是否有效？

0 个答案: