图像没有使用JS onChange正确调整大小

Question

https://jsfiddle.net/oqczdudz/

document.getElementById('phonetype').addEventListener("change", function() {
  var phoneType = document.getElementById('phonetype').value;
  if (phoneType == "iPhone") {
      document.getElementById('tab1').innerHTML = '<img src="images/Device Icon - Apple 3.png" width="64" height="64" alt=""/>';
      document.getElementById('phone').style.background = "url('images/devices/iPhone%20Black.png')";
}
else {
    document.getElementById('tab1').innerHTML = '<img src="images/Device Icon - Samsung 3.png" width="64" height="64" alt=""/>';
    document.getElementById('phone').style.background = "url('images/devices/Samsung%20Black.png')";
}
  });

我有一个空心iPhone手机壳的图像，其背景颜色和图案通过它来显示。图像为350x568px。我想从下拉选项动态更改该图片，我已经使用javascript事件监听器更改功能。 CSS代码管理图像的宽度和高度。但是，当iPhone更换为三星手机时，图像显示方式太大，我不明白为什么。任何人都可以帮我找出原因吗？

这是显示发生了什么的链接，单击左上角的“选项”，将“手机类型”更改为“Galaxy S7”。你会看到发生了什么。

http://www.matthewmwalker.com/sweetbriar/index.html

谢谢！