如下效果圖. 這個圖片的邊框.寬度隨瀏覽器的寬度而變化. 內容也按照原定比例縮小.並且保持比例.使得看上去協調與美工設計的無差別.

<style>
       .yiguoqi,.weishiyong,.yiguoqi{
           background-size: 100%; /*關鍵點,背景圖片會自動撐到最高.*/
           background-repeat: no-repeat;
           background-position: center;
       }
       .mian_e{
           width:38%
 
;
           vertical-align: middle;
           text-align: left;
           font-size: 4rem;
           color: #D08C14;
           font-weight: bold;
           padding: 10% 0 10% 3%; /*關鍵點 利用邊距撐大容器,使得背景圖片也跟著變大變小.而不是給這個元素定個固定的高度.*/
       }
       .yishiyong{
           background-image: url("./Style/images/youhuiquan/13.png"
 
);
       }
       .weishiyong{
           background-image: url("./Style/images/youhuiquan/11.png");
       }
       .yiguoqi{
           background-image: url("./Style/images/youhuiquan/12.png");
       }
   </style>

<div style="padding: 0.8rem;">
    <table style="width: 100%; " class="weishiyong" 
 
>
        <tr><td class="mian_e">
            ￥ 100
</td><td class="neirong">
            {{el.name}} <br/>
            序列號:{{el.xuliehao}}<br/>
            領用時間:{{el.lingyong_time}}<br/>
            有效期:{{el.youxiaoqi}}天
</td></tr>
    </table>
</div>