HTML CSS3 streckt den Bildanzeigeeffekt nicht

<div id="Oberfläche-div1">
<img :src="Bild1" Klasse="Oberflächen-Bild">
</div>

#Oberfläche-div1{
    Position: relativ;
    Breite: 372px;
    Höhe: 175px;
    schweben: links;
    Rand oben: -34px;
    Rand links: 122px;
    Cursor: Zeiger;
    Hintergrund: URL (../../../static/img/addheadpic.jpg) Mitte Mitte, keine Wiederholung;
    Textausrichtung: zentriert;
    Rand: 1px durchgezogen #CCCCCC;
    Rahmenradius: 6px;
    Überlauf: versteckt;
}
#surface-div1 img{
    Position: absolut;
    Breite: 100 %;
    oben: 50 %;
    links: 0;
    transformieren: verschiebeY(-50%) Skala(1);
    Rand: keiner;
    Rahmenradius: 6px;Anzeige:Tabellenzelle
} 

<div id="Oberflächen-div">
  <div Klasse="auf-div">
     <img :src="Bild" Klasse="Oberflächen-Bild">
  </div>
</div>

#Oberflächen-div{
    Position: relativ;
    Breite: 372px;
    Höhe: 372px;
    schweben: links; 
    Rand oben: -34px;
    Rand links: 122px;
    Cursor: Zeiger;
    Hintergrund: URL (../../../static/img/addheadpic.jpg) Mitte Mitte, keine Wiederholung;
    Textausrichtung: zentriert;
    Rand: 1px durchgezogen #CCCCCC;
    Rahmenradius: 6px;
    Überlauf: versteckt;
}
.sur-div{
    Anzeige: Tabellenzelle;
    Textausrichtung: zentriert;
    vertikale Ausrichtung: Mitte;
    Schriftgröße: 12px;
    Breite: 372px;
    Höhe: 372px;
    Überlauf: versteckt;
}
#surface-div img{   
    maximale Höhe: 100 %;
    maximale Breite: 100 %;
    vertikale Ausrichtung: Mitte;
    Rand: 0;
}