HTML CSS3は画像表示効果を引き伸ばさない

<div id="surface-div1">
<img :src="pic1" class="surface-img">
</div>

#サーフェスdiv1{
    位置: 相対的;
    幅: 372ピクセル;
    高さ: 175px;
    フロート: 左;
    上マージン: -34px;
    左マージン: 122px;
    カーソル: ポインタ;
    背景: url(../../../static/img/addheadpic.jpg)center center no-repeat;
    テキスト配置: 中央;
    境界線: 1px 実線 #CCCCCC;
    境界線の半径:6px;
    オーバーフロー: 非表示;
}
#surface-div1 画像{
    位置: 絶対;
    幅: 100%;
    上位: 50%;
    左: 0;
    変換: translateY(-50%) スケール(1);
    境界線:なし;
    境界線の半径: 6px;表示:テーブルセル
} 

<div id="surface-div">
  <div class="sur-div">
     <img :src="pic" class="surface-img">
  </div>
</div>

#サーフェスdiv{
    位置: 相対的;
    幅: 372ピクセル;
    高さ: 372px;
    フロート: 左; 
    上マージン: -34px;
    左マージン: 122px;
    カーソル: ポインタ;
    背景: url(../../../static/img/addheadpic.jpg)center center no-repeat;
    テキスト配置: 中央;
    境界線: 1px 実線 #CCCCCC;
    境界線の半径:6px;
    オーバーフロー: 非表示;
}
.sur-div{
    表示: テーブルセル;
    テキスト配置: 中央;
    垂直位置合わせ: 中央;
    フォントサイズ: 12px;
    幅: 372ピクセル;
    高さ: 372px;
    オーバーフロー: 非表示;
}
#サーフェスdiv画像{   
    最大高さ: 100%;
    最大幅: 100%;
    垂直位置合わせ: 中央;
    境界線: 0;
}